/* ============================================================
   Manager Panel — Isolated CSS
   ALL manager styles go here. Never imported by main site.
   ============================================================ */

/* === Extra monitoring tokens (extend :root block below) === */

/* === CSS Variables — VSCode Dark palette === */
:root,
[data-theme="dark"] {
  --mgr-bg:         #1e1e1e;
  --mgr-surface:    #252526;
  --mgr-surface-hi: #2d2d30;
  --mgr-border:     #3e3e42;
  --mgr-text:       #d4d4d4;
  --mgr-muted:      #858585;
  --mgr-accent:     #c586c0;
  --mgr-accent-hov: #a96fa3;
  --mgr-danger:     #f14c4c;
  --mgr-success:    #4ec9b0;
  --mgr-sidebar-w:  240px;
  --mgr-rad:        6px;
  --mgr-rad-sm:     4px;
  /* Alto de la barra superior y padding del contenedor de contenido.
     El chat los necesita para calcular su alto y sangrar hasta el borde. */
  --mgr-topbar-h:      52px;
  --mgr-content-pad-y: 24px;
  --mgr-content-pad-x: 20px;
  /* monitoring extras */
  --mgr-warn:       #dcdcaa;
  --mgr-net-up:     #ce9178;
  --mgr-net-down:   #569cd6;
  --mgr-mono:       'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
}

[data-theme="light"] {
  --mgr-bg:         #f5f5f5;
  --mgr-surface:    #ffffff;
  --mgr-surface-hi: #ebebeb;
  --mgr-border:     #dcdcdc;
  --mgr-text:       #1a1a1a;
  --mgr-muted:      #6e6e6e;
  --mgr-accent:     #8b3d96;
  --mgr-accent-hov: #6e2f78;
  --mgr-danger:     #c72e2e;
  --mgr-success:    #0f7b6c;
  /* Los tokens de dato están calibrados para fondo oscuro; sobre blanco
     son ilegibles. El tema claro necesita sus propias versiones, y las
     usan chat, monitoreo y seguridad por igual. */
  --mgr-warn:       #8a6100;
  --mgr-net-up:     #a4491f;
  --mgr-net-down:   #1a5fb4;
}

/* === Global reset (scoped to manager pages) === */
.mgr-root *, .mgr-root *::before, .mgr-root *::after,
.mgr-login-page *, .mgr-login-page *::before, .mgr-login-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* El atributo hidden debe ganar a cualquier display de esta hoja.
   Muchas reglas fijan display (flex, grid) en clases que tambien se ocultan
   con [hidden]; sin esto el elemento sigue ocupando sitio aunque el atributo
   este puesto. Paso ya dos veces: en el panel del chat y en los campos de
   Horario del servidor. */
.mgr-root [hidden],
.mgr-login-page [hidden] { display: none !important; }

/* Eliminate browser default body margin/background */
.mgr-root,
.mgr-login-page {
  margin: 0;
  padding: 0;
  background: #1e1e1e;
  min-height: 100vh;
}

/* ============================================================
   === Login Page ===
   Esta pantalla no carga manager_theme.css, donde viven los tokens de tema
   del resto del panel, así que declara los suyos aquí. El interruptor de
   tema escribe data-theme en <html> igual que dentro del panel, y las dos
   pantallas comparten la misma clave de localStorage: el tema que eliges
   antes de entrar es el que te encuentras dentro.
   ============================================================ */
.mgr-login-page {
  --lg-bg:        #1e1e1e;
  --lg-surface:   #252526;
  --lg-input:     #1e1e1e;
  --lg-border:    #3e3e42;
  --lg-hover:     #2d2d30;
  --lg-text:      #d4d4d4;
  --lg-muted:     #858585;
  --lg-faint:     #6e6e6e;
  --lg-place:     #4e4e52;
  --lg-accent:    #c586c0;
  --lg-accent-hi: #a96fa3;
  --lg-on-accent: #ffffff;
  --lg-danger:    #f48771;
  --lg-shadow:    0 24px 64px rgba(0,0,0,.6);
}

[data-theme="light"] .mgr-login-page {
  --lg-bg:        #f4f4f5;
  --lg-surface:   #ffffff;
  --lg-input:     #ffffff;
  --lg-border:    #dcdcdf;
  --lg-hover:     #ececee;
  --lg-text:      #26262a;
  --lg-muted:     #5f5f68;
  --lg-faint:     #6e6e77;
  --lg-place:     #a0a0a8;
  --lg-accent:    #8b3d96;
  --lg-accent-hi: #6e2f78;
  --lg-on-accent: #ffffff;
  --lg-danger:    #c72e2e;
  --lg-shadow:    0 24px 56px -20px rgba(20,20,30,.28), 0 2px 8px rgba(20,20,30,.08);
}

.mgr-login-page {
  min-height: 100vh;
  background: var(--lg-bg);
  display: flex;
  /* Column, o los controles de encima se pondrían al lado de la tarjeta. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
}

.mgr-login-card {
  background: var(--lg-surface);
  border: 1px solid var(--lg-border);
  border-radius: 6px;
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--lg-shadow);
}

/* === Login y registro publicos ===
   Reaprovechan la tarjeta del login del manager; esto es lo poco que
   necesitan encima. */

/* Identidad de la marca: la pintan todas las paginas publicas a traves del
   partial public/_brand, para que el icono y el nombre se vean igual en
   todas. El distintivo es el mismo de la barra lateral del panel. */
.mgr-pub-mark {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  margin: 0 auto 20px;
  padding: 0 10px;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--mgr-accent, #a371c8), #8b5fa8);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mgr-on-accent, #fff);
}

/* Con un icono subido se ensena el icono y nada mas: ni fondo ni esquinas
   redondeadas, que le pondrian una caja que no es suya. 'contain' en vez de
   'cover' para no recortarlo si no es cuadrado. */
.mgr-pub-mark--img {
  display: block;
  width: 46px;
  padding: 0;
  object-fit: contain;
  background: none;
  border-radius: 0;
}

.mgr-pub-brand {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  color: var(--lg-faint);
  margin-bottom: 16px;
}

/* El registro pide mas campos: cabe algo mas ancho sin dejar de centrarse. */
.mgr-pub-card--wide { max-width: 460px; }

.mgr-pub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
@media (max-width: 460px) {
  .mgr-pub-grid { grid-template-columns: 1fr; }
}

.mgr-pub-alt {
  margin-top: 20px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--lg-muted);
}
.mgr-pub-alt a {
  color: var(--lg-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mgr-pub-alt a:hover { color: var(--lg-accent-hi); }

/* === Captcha del registro === */
.mgr-captcha {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mgr-captcha__box {
  display: block;
  flex: 1;
  padding: 4px;
  border: 1px solid var(--lg-border);
  border-radius: 4px;
  background: var(--lg-input);
  /* Que no se pueda seleccionar y copiar el SVG de un tiron. */
  user-select: none;
}
.mgr-captcha__art {
  display: block;
  width: 100%;
  height: auto;
}

.mgr-captcha__reload {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--lg-border);
  border-radius: 4px;
  color: var(--lg-muted);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}
.mgr-captcha__reload:hover {
  color: var(--lg-accent);
  border-color: var(--lg-accent);
}

/* Señuelo: fuera de la pantalla en vez de display:none, que algunos bots
   miran para saltarselo. Para quien usa lector de pantalla lo tapa el
   aria-hidden del contenedor. */
.mgr-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mientras las pantallas no funcionen, que se note al mirarlas. */
.mgr-pub-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--lg-border);
  text-align: center;
  font-size: 0.74rem;
  color: var(--lg-faint);
}

/* === Controles de encima de la tarjeta: idioma y tema === */
.mgr-login-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.mgr-lang--login {
  display: flex;
  border: 1px solid var(--lg-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--lg-surface);
}
.mgr-lang--login form { margin: 0; display: flex; }
.mgr-lang--login .mgr-lang__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--lg-muted);
  transition: background 0.15s, color 0.15s;
}
.mgr-lang--login .mgr-lang__btn:hover { background: var(--lg-hover); color: var(--lg-text); }
.mgr-lang--login .mgr-lang__btn.is-active {
  background: var(--lg-accent);
  color: var(--lg-on-accent);
}

.mgr-login-theme {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--lg-surface);
  border: 1px solid var(--lg-border);
  border-radius: 6px;
  color: var(--lg-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mgr-login-theme:hover {
  background: var(--lg-hover);
  color: var(--lg-accent);
  border-color: var(--lg-accent);
}

.mgr-login-title {
  color: var(--lg-text);
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.mgr-login-sub {
  color: var(--lg-muted);
  font-size: 0.82rem;
  text-align: center;
  margin-bottom: 28px;
}

.mgr-field {
  margin-bottom: 16px;
}

.mgr-label {
  display: block;
  color: var(--lg-muted);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mgr-input {
  width: 100%;
  background: var(--lg-input);
  border: 1px solid var(--lg-border);
  border-radius: 4px;
  color: var(--lg-text);
  font-size: 0.92rem;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s;
}

.mgr-input:focus { border-color: var(--lg-accent); }
.mgr-input::placeholder { color: var(--lg-place); }

.mgr-pwd-wrap { position: relative; }

.mgr-pwd-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--lg-faint, var(--mgr-faint));
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 4px;
  line-height: 1;
}

.mgr-pwd-toggle:hover { color: var(--lg-muted, var(--mgr-muted)); }

/* Los dos ojos viven en el botón y solo se ve el que toca: tapada el ojo
   abierto —"pulsa para ver"—, destapada el ojo tachado —"pulsa para tapar"—.
   Alinear el trazo con el texto del campo evita el salto de 1px al cambiar. */
.mgr-pwd-toggle svg { display: block; }
.mgr-pwd-toggle .mgr-pwd-toggle__off,
.mgr-pwd-toggle.is-shown .mgr-pwd-toggle__on { display: none; }
.mgr-pwd-toggle.is-shown .mgr-pwd-toggle__off { display: block; }
.mgr-pwd-toggle.is-shown { color: var(--lg-accent, var(--mgr-accent)); }

/* Compartida con el panel, donde --lg-* no está definida: el respaldo son
   los tokens del tema. */
.mgr-btn-primary {
  width: 100%;
  background: var(--lg-accent, var(--mgr-accent));
  border: none;
  border-radius: 4px;
  color: var(--lg-on-accent, var(--mgr-on-accent));
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
}

.mgr-btn-primary:hover { background: var(--lg-accent-hi, var(--mgr-accent-hov)); }

/* === Panel: cuenta sin rango suficiente ===
   Reaprovecha la tarjeta del login. Lo único propio es el candado, la línea
   de la cuenta atrás y que aquí el botón es un enlace, no un submit. */
.mgr-noaccess { text-align: center; }

.mgr-noaccess__mark {
  font-size: 2rem;
  line-height: 1;
  margin: 0 0 14px;
}

.mgr-noaccess__back {
  color: var(--lg-muted);
  font-size: 0.78rem;
  margin: 0 0 20px;
}

.mgr-noaccess__link {
  display: block;
  text-decoration: none;
  text-align: center;
  margin-top: 0;
}

.mgr-error {
  background: rgba(241,76,76,0.1);
  border: 1px solid rgba(241,76,76,0.3);
  border-radius: 4px;
  color: var(--lg-danger, var(--mgr-danger));
  font-size: 0.85rem;
  padding: 10px 12px;
  margin-bottom: 16px;
  text-align: center;
}

/* ============================================================
   === App Layout ===
   ============================================================ */
.mgr-app {
  display: flex;
  min-height: 100vh;
  background: var(--mgr-bg);
  color: var(--mgr-text);
  font-family: 'Inter', system-ui, sans-serif;
}

/* === Sidebar — no border, color separation like VSCode === */
.mgr-sidebar {
  width: var(--mgr-sidebar-w);
  min-height: 100vh;
  background: var(--mgr-surface);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: transform 0.2s ease;
}

.mgr-sidebar-header {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--mgr-border);
}

.mgr-sidebar-logo {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mgr-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mgr-sidebar-logo span { color: var(--mgr-accent); }

.mgr-nav {
  flex: 1;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mgr-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 0;
  color: var(--mgr-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.1s, color 0.1s;
}

.mgr-nav-item:hover {
  background: var(--mgr-surface-hi);
  color: var(--mgr-text);
}

.mgr-nav-item.active {
  background: var(--mgr-surface-hi);
  color: var(--mgr-text);
  border-left: 2px solid var(--mgr-accent);
  padding-left: 14px;
}

.mgr-nav-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.mgr-nav-empty {
  color: var(--mgr-muted);
  font-size: 0.8rem;
  padding: 10px 16px;
  display: block;
}

.mgr-sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--mgr-border);
}

.mgr-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

.mgr-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mgr-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mgr-user-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mgr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgr-user-rank {
  font-size: 0.7rem;
  color: var(--mgr-accent);
}

.mgr-logout-form { width: 100%; }

.mgr-logout-btn {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  font-size: 0.82rem;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}

.mgr-logout-btn:hover {
  background: rgba(241,76,76,0.1);
  color: var(--mgr-danger);
}

/* === Main content area === */
.mgr-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mgr-topbar {
  height: var(--mgr-topbar-h);
  background: var(--mgr-surface);
  border-bottom: 1px solid var(--mgr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.mgr-page-title {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--mgr-muted);
  letter-spacing: 0.02em;
}

.mgr-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mgr-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mgr-theme-btn {
  background: none;
  border: none;
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 5px 7px;
  border-radius: var(--mgr-rad-sm);
  transition: background 0.1s, color 0.1s;
}

.mgr-theme-btn:hover {
  background: var(--mgr-surface-hi);
  color: var(--mgr-text);
}

.mgr-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px;
}

.mgr-content {
  padding: var(--mgr-content-pad-y) var(--mgr-content-pad-x);
  flex: 1;
}

/* Mobile nav — dropdown from topbar */
@media (max-width: 768px) {
  .mgr-hamburger { display: flex; align-items: center; justify-content: center; }

  /* Sidebar becomes a full-width dropdown below the topbar */
  .mgr-sidebar {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100vh - 52px);
    z-index: 100;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.18s ease, visibility 0s 0.2s;
    overflow-y: auto;
    /* horizontal layout for nav items */
  }

  .mgr-sidebar--open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.2s ease, opacity 0.18s ease;
  }

  /* Nav items larger tap targets on mobile */
  .mgr-nav-item {
    padding: 12px 20px;
    font-size: 0.95rem;
  }

  /* Backdrop */
  .mgr-mobile-backdrop {
    display: none;
    position: fixed;
    top: 52px;
    left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99;
  }
  .mgr-mobile-backdrop--open { display: block; }
}

/* ============================================================
   === Stat cards (dashboard) ===
   ============================================================ */
.mgr-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--mgr-border);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  overflow: hidden;
  margin-bottom: 20px;
}

.mgr-stat-card {
  background: var(--mgr-surface);
  padding: 22px 20px;
}

.mgr-stat-value {
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--mgr-text);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.mgr-stat-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--mgr-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* === Welcome card === */
.mgr-welcome-card {
  background: var(--mgr-surface);
  border-left: 2px solid var(--mgr-accent);
  padding: 24px;
  margin-bottom: 20px;
}

.mgr-welcome-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--mgr-text);
  margin-bottom: 6px;
}

.mgr-welcome-meta {
  color: var(--mgr-muted);
  font-size: 0.82rem;
}

.mgr-rank-badge {
  display: inline-block;
  background: rgba(197,134,192,0.12);
  color: var(--mgr-accent);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
  letter-spacing: 0.03em;
}

/* ============================================================
   === Menu Config Panel ===
   ============================================================ */
.mgr-config-card {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  margin-bottom: 12px;
  overflow: hidden;
}

.mgr-config-card-header {
  background: var(--mgr-surface-hi);
  border-bottom: 1px solid var(--mgr-border);
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mgr-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mgr-config-table {
  width: 100%;
  border-collapse: collapse;
}

.mgr-config-table th,
.mgr-config-table td {
  padding: 9px 16px;
  text-align: left;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--mgr-border);
  color: var(--mgr-text);
}

.mgr-config-table th {
  color: var(--mgr-muted);
  font-weight: 400;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mgr-config-table tr:last-child td { border-bottom: none; }

.mgr-config-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--mgr-accent);
  cursor: pointer;
}

.mgr-save-btn {
  background: var(--mgr-accent);
  border: none;
  border-radius: var(--mgr-rad-sm);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 22px;
  cursor: pointer;
  margin-top: 14px;
  transition: background 0.15s;
}

.mgr-save-btn:hover { background: var(--mgr-accent-hov); }

.mgr-empty-message {
  color: var(--mgr-muted);
  padding: 12px 16px;
  font-size: 0.875rem;
}

/* ============================================================
   === Email Server Config ===
   ============================================================ */
.mgr-email-card {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  margin-bottom: 16px;
  overflow: hidden;
}

.mgr-email-card-header {
  background: var(--mgr-surface-hi);
  border-bottom: 1px solid var(--mgr-border);
  padding: 10px 18px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mgr-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mgr-email-body {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* === Enable toggle === */
.mgr-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mgr-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.mgr-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.mgr-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--mgr-border);
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s;
}

.mgr-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.mgr-toggle input:checked + .mgr-toggle-slider {
  background: var(--mgr-accent);
}

.mgr-toggle input:checked + .mgr-toggle-slider::before {
  transform: translateX(18px);
}

.mgr-toggle-label {
  font-size: 0.88rem;
  color: var(--mgr-text);
  font-weight: 500;
}

/* === Preset selector === */
.mgr-preset-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mgr-preset-btn {
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 14px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.mgr-preset-btn:hover {
  color: var(--mgr-text);
  border-color: var(--mgr-muted);
}

.mgr-preset-btn.active {
  background: rgba(197,134,192,0.15);
  border-color: var(--mgr-accent);
  color: var(--mgr-accent);
}

/* === Form fields === */
.mgr-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mgr-form-label {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--mgr-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mgr-form-input {
  background: var(--mgr-bg);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-text);
  font-size: 0.88rem;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}

.mgr-form-input:focus { border-color: var(--mgr-accent); }
.mgr-form-input::placeholder { color: var(--mgr-border); }
.mgr-form-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mgr-form-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 12px;
}

.mgr-check-row {
  display: flex;
  gap: 20px;
}

.mgr-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--mgr-text);
  cursor: pointer;
}

.mgr-check-item input[type="checkbox"],
.mgr-check-item input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--mgr-accent);
  cursor: pointer;
}

.mgr-pwd-wrap-email { position: relative; }

.mgr-pwd-wrap-email .mgr-form-input { padding-right: 36px; }

/* === Test result banner === */
.mgr-test-result {
  border-radius: var(--mgr-rad-sm);
  font-size: 0.85rem;
  padding: 10px 14px;
  margin-bottom: 4px;
}

.mgr-test-result--ok {
  background: rgba(78,201,176,0.12);
  border: 1px solid rgba(78,201,176,0.35);
  color: #4ec9b0;
}

.mgr-test-result--error {
  background: rgba(241,76,76,0.1);
  border: 1px solid rgba(241,76,76,0.3);
  color: #f48771;
}

/* === Test card hidden when disabled === */
.mgr-test-card { transition: opacity 0.2s; }
.mgr-test-card--hidden { display: none; }

/* === Textarea === */
.mgr-form-textarea {
  background: var(--mgr-bg);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-text);
  font-size: 0.88rem;
  font-family: inherit;
  padding: 8px 10px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  width: 100%;
  transition: border-color 0.15s;
}

.mgr-form-textarea:focus { border-color: var(--mgr-accent); }
.mgr-preset-label { margin-bottom: 8px; }
.mgr-test-submit-row { text-align: right; }


/* ============================================================
   === Monitoreo del Servidor ===
   ============================================================ */

/* -- Header / range selector -- */
.mgr-mon-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.mgr-mon-live-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mgr-mon-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mgr-border);
  transition: background 0.3s;
  flex-shrink: 0;
}

.mgr-mon-live-dot.live { background: var(--mgr-success); box-shadow: 0 0 6px var(--mgr-success); }

.mgr-mon-live-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mgr-muted);
  text-transform: uppercase;
}

.mgr-mon-range-row { display: flex; gap: 4px; flex-wrap: wrap; }

.mgr-mon-range-btn {
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.mgr-mon-range-btn:hover { color: var(--mgr-text); border-color: var(--mgr-muted); }

.mgr-mon-range-btn.active {
  background: rgba(197,134,192,0.15);
  border-color: var(--mgr-accent);
  color: var(--mgr-accent);
}

.mgr-mon-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}

.mgr-mon-date-input { width: auto; flex: 0 1 200px; }
.mgr-mon-date-sep   { color: var(--mgr-muted); font-size: 0.85rem; }

/* -- Resource grid -- */
.mgr-mon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--mgr-border);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  overflow: hidden;
  margin-bottom: 1px;
}

.mgr-mon-card { background: var(--mgr-surface); padding: 16px 18px 14px; min-width: 0; }

.mgr-mon-card-top {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.mgr-mon-card-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--mgr-muted);
  text-transform: uppercase;
  flex: 1;
}

.mgr-mon-value {
  font-family: var(--mgr-mono);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--mgr-text);
  transition: color 0.4s;
}

.mgr-mon-value--sm { font-size: 1.15rem; }

.mgr-mon-unit {
  font-family: var(--mgr-mono);
  font-size: 0.75rem;
  color: var(--mgr-muted);
  align-self: flex-end;
  padding-bottom: 3px;
}

.mgr-mon-sub {
  font-family: var(--mgr-mono);
  font-size: 0.72rem;
  color: var(--mgr-muted);
  margin-bottom: 8px;
}

.mgr-mon-chart-wrap { height: 72px; margin-top: 10px; position: relative; }

.mgr-mon-card--net .mgr-mon-card-label { margin-bottom: 8px; display: block; }

.mgr-mon-net-row { display: flex; align-items: baseline; gap: 5px; margin-bottom: 2px; }

.mgr-mon-net-arrow { font-family: var(--mgr-mono); font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }

.mgr-mon-net-up-color   { color: var(--mgr-net-up); }
.mgr-mon-net-down-color { color: var(--mgr-net-down); }

.mgr-mon-value--ok   { color: var(--mgr-success) !important; }
.mgr-mon-value--warn { color: var(--mgr-warn)    !important; }
.mgr-mon-value--err  { color: var(--mgr-danger)  !important; }

/* -- Stats bar -- */
.mgr-mon-stats-bar {
  display: flex;
  align-items: center;
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-top: none;
  padding: 10px 20px;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.mgr-mon-stat { display: flex; flex-direction: column; align-items: center; padding: 4px 18px; min-width: 0; }
.mgr-mon-stat--ip { align-items: flex-start; }

.mgr-mon-stat-val {
  font-family: var(--mgr-mono);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--mgr-text);
  line-height: 1.2;
}

.mgr-mon-stat-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mgr-muted);
  text-transform: uppercase;
}

.mgr-mon-ip-val { font-family: var(--mgr-mono); font-size: 0.82rem; color: var(--mgr-text); letter-spacing: 0.03em; }

.mgr-mon-stat--online .mgr-mon-stat-val { color: var(--mgr-success); }
.mgr-mon-stat--danger .mgr-mon-stat-val { color: var(--mgr-danger); }

.mgr-mon-stat-sep       { width: 1px; height: 32px; background: var(--mgr-border); flex-shrink: 0; }
.mgr-mon-stat-sep--wide { margin: 0 8px; }

/* -- Logs section -- */
.mgr-mon-logs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.mgr-mon-log-panel {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mgr-mon-log-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--mgr-surface-hi);
  border-bottom: 1px solid var(--mgr-border);
  flex-wrap: wrap;
}

.mgr-mon-log-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--mgr-accent);
  text-transform: uppercase;
  flex: 1;
}

.mgr-mon-log-tabs { display: flex; gap: 4px; }

.mgr-mon-log-tab {
  background: none;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  text-transform: uppercase;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.mgr-mon-log-tab:hover { color: var(--mgr-text); }

.mgr-mon-log-tab.active {
  background: rgba(197,134,192,0.12);
  border-color: var(--mgr-accent);
  color: var(--mgr-accent);
}

.mgr-mon-refresh-btn {
  background: none;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 3px 7px;
  transition: color 0.1s, border-color 0.1s;
}

.mgr-mon-refresh-btn:hover { color: var(--mgr-text); border-color: var(--mgr-text); }

.mgr-mon-log-entries { flex: 1; max-height: 340px; overflow-y: auto; padding: 6px 0; }
.mgr-mon-log-entries--errors { max-height: 340px; }

.mgr-mon-log-empty { padding: 24px 16px; text-align: center; font-size: 0.8rem; color: var(--mgr-muted); }

.mgr-mon-log-entry {
  display: grid;
  grid-template-columns: 140px 36px 38px 1fr auto 100px 52px;
  align-items: center;
  gap: 6px;
  padding: 3px 14px;
  font-family: var(--mgr-mono);
  font-size: 0.72rem;
  border-bottom: 1px solid transparent;
  transition: background 0.1s;
}

.mgr-mon-log-entry:hover { background: var(--mgr-surface-hi); }

.mgr-mon-log-entry .ts     { color: var(--mgr-muted); white-space: nowrap; }
.mgr-mon-log-entry .path   { color: var(--mgr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-mon-log-entry .user   { color: var(--mgr-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-mon-log-entry .ip     { color: var(--mgr-muted); font-size: 0.68rem; white-space: nowrap; }
.mgr-mon-log-entry .ms     { color: var(--mgr-muted); text-align: right; white-space: nowrap; }
.mgr-mon-log-entry .none   { color: var(--mgr-border); font-style: italic; }

.mgr-mon-log-entry .method             { font-weight: 700; font-size: 0.65rem; }
.mgr-mon-log-entry .method.get         { color: var(--mgr-success); }
.mgr-mon-log-entry .method.put         { color: var(--mgr-warn); }
.mgr-mon-log-entry .method.post        { color: var(--mgr-accent); }
.mgr-mon-log-entry .method.delete      { color: var(--mgr-danger); }

.mgr-mon-log-entry .status      { font-weight: 600; }
.mgr-mon-log-entry .status.ok   { color: var(--mgr-success); }
.mgr-mon-log-entry .status.warn { color: var(--mgr-warn); }
.mgr-mon-log-entry .status.err  { color: var(--mgr-danger); }

.mgr-mon-log-err {
  display: block !important;
  grid-template-columns: none !important;
  padding: 8px 14px;
  font-family: var(--mgr-mono);
  font-size: 0.70rem;
  color: var(--mgr-muted);
  border-bottom: 1px solid var(--mgr-border);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}

.mgr-mon-log-err:hover { background: var(--mgr-surface-hi); }

.mgr-mon-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--mgr-border);
}

.mgr-mon-pager-btn {
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-text);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 3px 10px;
  transition: background 0.1s;
}

.mgr-mon-pager-btn:hover  { background: var(--mgr-border); }
.mgr-mon-pager-btn.disabled { opacity: 0.35; pointer-events: none; }

.mgr-mon-pager-info { font-family: var(--mgr-mono); font-size: 0.75rem; color: var(--mgr-muted); }

@media (max-width: 900px) {
  .mgr-mon-grid { grid-template-columns: 1fr 1fr; }
  .mgr-mon-logs { grid-template-columns: 1fr; }
}

@media (max-width: 560px) { .mgr-mon-grid { grid-template-columns: 1fr; } }

/* Real-time log entry flash */
@keyframes mgr-entry-flash {
  from { background: rgba(197, 134, 192, 0.18); }
  to   { background: transparent; }
}

.mgr-mon-log-entry--new {
  animation: mgr-entry-flash 1.2s ease-out forwards;
}

/* ── Server Logs panel ── */
.mgr-mon-server-log-panel {
  margin-top: 16px;
  border-radius: var(--mgr-rad);
}

.mgr-mon-live-dot--sm {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mgr-border);
  flex-shrink: 0;
  transition: background 0.3s;
}

.mgr-mon-live-dot--sm.live { background: var(--mgr-success); box-shadow: 0 0 5px var(--mgr-success); }

.mgr-mon-slog-tail-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  color: var(--mgr-muted);
  cursor: pointer;
  user-select: none;
  margin-left: auto;
}

.mgr-mon-slog-entries {
  max-height: 340px;
  font-family: var(--mgr-mono);
  font-size: 0.71rem;
  overflow-y: auto;
  padding: 6px 0;
}

/* Line-level coloring by log level */
.mgr-mon-slog-line {
  padding: 2px 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 2px solid transparent;
  transition: background 0.1s;
}

.mgr-mon-slog-line:hover { background: var(--mgr-surface-hi); }

.mgr-mon-slog-line--info     { color: var(--mgr-muted); }
.mgr-mon-slog-line--warning  { color: var(--mgr-warn); border-left-color: var(--mgr-warn); }
.mgr-mon-slog-line--error    { color: var(--mgr-danger); border-left-color: var(--mgr-danger); }
.mgr-mon-slog-line--critical { color: var(--mgr-danger); border-left-color: var(--mgr-danger); font-weight: 700; }
.mgr-mon-slog-line--trace    { color: var(--mgr-muted); font-style: italic; padding-left: 20px; }
.mgr-mon-slog-line--new      { animation: mgr-entry-flash 1.2s ease-out forwards; }

/* ============================================================
   === Sistema de Ban ===
   ============================================================ */

#mgr-ban-page { display: flex; flex-direction: column; gap: 20px; }

.mgr-ban-section {
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  overflow: hidden;
}

.mgr-ban-section--wl { border-color: rgba(78,201,176,0.3); }

.mgr-ban-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--mgr-surface-hi);
  border-bottom: 1px solid var(--mgr-border);
}

.mgr-ban-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mgr-accent);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mgr-ban-section--wl .mgr-ban-section-title { color: var(--mgr-success); }

.mgr-ban-section-icon { font-size: 0.9rem; }

/* ── Form body ── */
.mgr-ban-form-body { padding: 18px 20px 20px; }

.mgr-ban-field-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mgr-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Type toggle */
.mgr-ban-type-row { display: flex; gap: 6px; margin-bottom: 14px; }

.mgr-ban-type-btn {
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 16px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.mgr-ban-type-btn:hover { color: var(--mgr-text); border-color: var(--mgr-muted); }
.mgr-ban-type-btn.active {
  background: rgba(197,134,192,0.15);
  border-color: var(--mgr-accent);
  color: var(--mgr-accent);
}
.mgr-ban-type-btn--safe.active {
  background: rgba(78,201,176,0.12);
  border-color: var(--mgr-success);
  color: var(--mgr-success);
}

/* Search row */
.mgr-ban-search-row { display: flex; gap: 8px; align-items: center; }

.mgr-ban-search-btn {
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-text);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 14px;
  height: 36px;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.mgr-ban-search-btn:hover { border-color: var(--mgr-accent); color: var(--mgr-accent); }

/* Preview card */
.mgr-ban-preview {
  margin-top: 10px;
  min-height: 0;
  transition: all 0.2s;
}

.mgr-ban-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  border-left: 3px solid var(--mgr-accent);
}

.mgr-ban-preview-card--banned { border-left-color: var(--mgr-danger); }

.mgr-ban-preview-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(197,134,192,0.2);
  border: 1px solid var(--mgr-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  color: var(--mgr-accent);
  flex-shrink: 0;
}

.mgr-ban-preview-info { flex: 1; min-width: 0; }
.mgr-ban-preview-name {
  font-weight: 600; font-size: 0.85rem; color: var(--mgr-text);
}
.mgr-ban-preview-email {
  font-family: var(--mgr-mono); font-size: 0.72rem; color: var(--mgr-muted);
}
.mgr-ban-preview-status {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 3px;
  background: rgba(241,76,76,0.15); color: var(--mgr-danger);
}
.mgr-ban-preview-status--ok {
  background: rgba(78,201,176,0.12); color: var(--mgr-success);
}

.mgr-ban-preview-error {
  font-size: 0.8rem; color: var(--mgr-danger); padding: 6px 0;
}

/* Duration presets */
.mgr-ban-dur-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }

.mgr-ban-dur-btn {
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  font-family: var(--mgr-mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.mgr-ban-dur-btn:hover { color: var(--mgr-text); border-color: var(--mgr-muted); }
.mgr-ban-dur-btn.active {
  background: rgba(197,134,192,0.15);
  border-color: var(--mgr-accent);
  color: var(--mgr-accent);
}
.mgr-ban-dur-btn--perm.active {
  background: rgba(241,76,76,0.12);
  border-color: var(--mgr-danger);
  color: var(--mgr-danger);
}

/* Custom duration */
.mgr-ban-custom-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 10px;
}

.mgr-ban-custom-field {
  display: flex; align-items: center; gap: 6px; cursor: default;
}

.mgr-ban-custom-input { width: 70px; text-align: center; font-family: var(--mgr-mono); }

.mgr-ban-custom-unit {
  font-size: 0.72rem; color: var(--mgr-muted); white-space: nowrap;
}

/* Reason */
.mgr-ban-reason { width: 100%; resize: vertical; min-height: 56px; }

/* Submit row */
.mgr-ban-submit-row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; margin-top: 14px;
}

.mgr-ban-apply-btn {
  background: rgba(241,76,76,0.15);
  border: 1px solid var(--mgr-danger);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-danger);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 20px;
  transition: background 0.15s, box-shadow 0.15s;
}
.mgr-ban-apply-btn:hover {
  background: rgba(241,76,76,0.25);
  box-shadow: 0 0 0 1px var(--mgr-danger);
}

/* Feedback */
.mgr-ban-feedback {
  font-size: 0.8rem; font-weight: 600; flex: 1;
  transition: color 0.2s;
}
.mgr-ban-feedback--ok  { color: var(--mgr-success); }
.mgr-ban-feedback--err { color: var(--mgr-danger); }

/* ── Tabs ── */
.mgr-ban-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--mgr-border);
  padding: 0 18px;
  background: var(--mgr-surface-hi);
}

.mgr-ban-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 10px 16px;
  transition: color 0.12s, border-color 0.12s;
  display: flex; align-items: center; gap: 6px;
}
.mgr-ban-tab:hover { color: var(--mgr-text); }
.mgr-ban-tab.active {
  color: var(--mgr-accent);
  border-bottom-color: var(--mgr-accent);
}

.mgr-ban-tab-count {
  background: var(--mgr-border);
  border-radius: 10px;
  font-size: 0.65rem;
  padding: 1px 6px;
  color: var(--mgr-muted);
}

/* ── Tables ── */
.mgr-ban-table-wrap { overflow-x: auto; }

.mgr-ban-table {
  width: 100%; border-collapse: collapse; font-size: 0.8rem;
}

.mgr-ban-table thead th {
  padding: 8px 14px;
  text-align: left;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mgr-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--mgr-border);
  white-space: nowrap;
}

.mgr-ban-row td { padding: 8px 14px; border-bottom: 1px solid rgba(62,62,66,0.5); }
.mgr-ban-row:last-child td { border-bottom: none; }
.mgr-ban-row:hover td { background: var(--mgr-surface-hi); }

.mgr-ban-cell--mono { font-family: var(--mgr-mono); font-size: 0.74rem; }
.mgr-ban-cell--dim  { color: var(--mgr-muted); }
.mgr-ban-cell--reason { color: var(--mgr-muted); font-size: 0.78rem; max-width: 200px; }

/* Avatar in table */
.mgr-ban-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(197,134,192,0.15);
  border: 1px solid rgba(197,134,192,0.3);
  font-size: 0.65rem; font-weight: 700; color: var(--mgr-accent);
  margin-right: 6px; vertical-align: middle;
}

/* Badges */
.mgr-ban-badge {
  display: inline-block;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 3px;
  text-transform: uppercase;
}
.mgr-ban-badge--perm  { background: rgba(241,76,76,0.15);  color: var(--mgr-danger); }
.mgr-ban-badge--timed { background: rgba(220,220,170,0.12); color: var(--mgr-warn); }
.mgr-ban-badge--ip    { background: rgba(206,145,120,0.12); color: #ce9178; }
.mgr-ban-badge--wl    { background: rgba(78,201,176,0.12);  color: var(--mgr-success); }

/* Lift button */
.mgr-ban-lift-btn {
  background: none;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 3px 10px;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.mgr-ban-lift-btn:hover {
  background: rgba(78,201,176,0.1);
  border-color: var(--mgr-success);
  color: var(--mgr-success);
}

/* Empty state */
.mgr-ban-empty {
  padding: 28px 18px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--mgr-muted);
}

/* ── Whitelist form ── */
.mgr-ban-wl-form { padding: 16px 20px 14px; border-bottom: 1px solid var(--mgr-border); }

.mgr-ban-wl-inputs {
  display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap;
}

.mgr-ban-wl-inputs .mgr-form-input { flex: 1; min-width: 160px; }

.mgr-ban-wl-add-btn {
  background: rgba(78,201,176,0.12);
  border: 1px solid var(--mgr-success);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-success);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0 16px;
  height: 36px;
  white-space: nowrap;
  transition: background 0.15s;
}
.mgr-ban-wl-add-btn:hover { background: rgba(78,201,176,0.22); }

/* Whitelist remove button */
.mgr-ban-wl-remove-btn {
  background: none;
  border: 1px solid var(--mgr-border);
  border-radius: 3px;
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 8px;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.mgr-ban-wl-remove-btn:hover {
  background: rgba(241,76,76,0.1);
  border-color: var(--mgr-danger);
  color: var(--mgr-danger);
}

@media (max-width: 700px) {
  .mgr-ban-dur-row { gap: 4px; }
  .mgr-ban-dur-btn { padding: 5px 8px; font-size: 0.7rem; }
  .mgr-ban-wl-inputs { flex-direction: column; align-items: stretch; }
  .mgr-ban-wl-add-btn { width: 100%; }
}

/* ============================================================
   === RESPONSIVE — xs(320) · sm(480) · md(768) · lg(1200) ===
   ============================================================ */

/* --- lg: 1200px -------------------------------------------- */
@media (max-width: 1200px) {
  .mgr-content { padding: var(--mgr-content-pad-y) var(--mgr-content-pad-x); }
  :root { --mgr-content-pad-y: 20px; --mgr-content-pad-x: 16px; }
}

/* --- md: 768px — sidebar/hamburger already defined above ---- */
@media (max-width: 768px) {
  .mgr-content { padding: 16px 14px; }
  .mgr-mon-stats-bar { padding: 8px 14px; }
}

/* --- sm: 480px --------------------------------------------- */
@media (max-width: 480px) {
  /* Topbar */
  .mgr-topbar { padding: 0 12px; }

  /* Main content padding */
  .mgr-content { padding: 12px 10px; }

  /* Login card */
  .mgr-login-card { padding: 28px 20px; }
  .mgr-login-title { font-size: 1.1rem; }

  /* Stats grid: smaller minimum column */
  .mgr-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  /* Monitoring: stats bar wraps */
  .mgr-mon-stats-bar { flex-wrap: wrap; padding: 8px 10px; gap: 4px 0; }
  .mgr-mon-stat { padding: 4px 10px; }
  .mgr-mon-stat-sep { height: 20px; }

  /* Monitoring: reduce chart canvas height */
  .mgr-mon-chart-wrap { height: 52px; }

  /* Monitoring: log entry grid tighter */
  .mgr-mon-log-entry {
    grid-template-columns: 100px 30px 30px 1fr auto 70px;
    font-size: 0.67rem;
    gap: 4px;
    padding: 3px 10px;
  }

  /* Email config: host+port row collapses to 1 col */
  .mgr-form-row { grid-template-columns: 1fr; }

  /* Ban form: duration preset buttons smaller */
  .mgr-ban-dur-btn { padding: 5px 7px; font-size: 0.68rem; }

  /* Ban custom duration row: wrap */
  .mgr-ban-custom-row { flex-wrap: wrap; }

  /* Ban submit row: stack vertically */
  .mgr-ban-submit-row { flex-direction: column; align-items: stretch; }
  .mgr-ban-apply-btn { width: 100%; text-align: center; }

  /* Ban section header text */
  .mgr-ban-section-title { font-size: 0.68rem; letter-spacing: 0.08em; }

  /* Tap targets */
  .mgr-ban-lift-btn,
  .mgr-ban-wl-remove-btn { min-height: 36px; padding: 6px 10px; }

  /* Ban / Whitelist tables → card view */
  .mgr-ban-table thead { display: none; }
  .mgr-ban-table,
  .mgr-ban-table tbody,
  .mgr-ban-table tr,
  .mgr-ban-table td { display: block; width: 100%; }
  .mgr-ban-table tr {
    border: 1px solid var(--mgr-border);
    border-radius: var(--mgr-rad);
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--mgr-surface);
  }
  .mgr-ban-table tr:hover td { background: transparent; }
  .mgr-ban-table td {
    display: flex;
    gap: 8px;
    padding: 5px 0;
    border: none;
    font-size: 0.82rem;
    align-items: center;
  }
  .mgr-ban-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--mgr-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 72px;
    flex-shrink: 0;
  }
  .mgr-ban-table td:last-child { justify-content: flex-end; }
  .mgr-ban-cell--reason { max-width: none; }

  /* Menu config table: collapse second col label */
  .mgr-config-table thead { display: none; }
  .mgr-config-table,
  .mgr-config-table tbody,
  .mgr-config-table tr,
  .mgr-config-table td { display: block; width: 100%; }
  .mgr-config-table tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--mgr-border);
  }
  .mgr-config-table tr:last-child { border-bottom: none; }
  .mgr-config-table td { border: none; padding: 0; width: auto; }
}

/* --- xs: 320px --------------------------------------------- */
@media (max-width: 320px) {
  /* Minimal lateral padding */
  .mgr-content { padding: 8px 8px; }
  .mgr-topbar { padding: 0 8px; }

  /* Login card */
  .mgr-login-card { padding: 20px 16px; }
  .mgr-login-title { font-size: 1rem; }

  /* Section / page headers smaller */
  .mgr-ban-section-title { font-size: 0.62rem; }
  .mgr-welcome-title { font-size: 1rem; }
  .mgr-mon-live-label { font-size: 0.62rem; }

  /* Buttons: full-width + min tap target */
  .mgr-save-btn,
  .mgr-ban-apply-btn,
  .mgr-ban-wl-add-btn,
  .mgr-ban-search-btn { width: 100%; min-height: 40px; }

  /* Ban custom duration: stack inputs */
  .mgr-ban-custom-row { flex-direction: column; }

  /* Monitoring: collapse stats bar to single column */
  .mgr-mon-stats-bar { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; }
  .mgr-mon-stat-sep { display: none; }
  .mgr-mon-stat { padding: 2px 0; }
}

/* ============================================================
   === Usuarios ===
   ============================================================ */

/* Page layout */
#mgr-users-page { display: flex; flex-direction: column; gap: 16px; }

/* count badge in section header */
#mgr-users-page .mgr-ban-section-header { justify-content: space-between; }

/* Toolbar */
.mgr-users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.mgr-users-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.mgr-users-search-input { flex: 1; min-width: 0; max-width: 380px; }
.mgr-users-search-btn {
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-text);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 14px;
  height: 36px;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
}
.mgr-users-search-btn:hover { border-color: var(--mgr-accent); color: var(--mgr-accent); }
.mgr-users-clear-btn { color: var(--mgr-muted); font-size: 0.8rem; text-decoration: none; white-space: nowrap; transition: color 0.12s; }
.mgr-users-clear-btn:hover { color: var(--mgr-danger); }
.mgr-users-count { font-size: 0.75rem; color: var(--mgr-muted); white-space: nowrap; }

/* Table */
.mgr-users-table-wrap {
  overflow-x: auto;
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
}
.mgr-users-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.mgr-users-table thead th {
  padding: 8px 14px;
  text-align: left;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mgr-muted);
  border-bottom: 1px solid var(--mgr-border);
  white-space: nowrap;
  background: var(--mgr-surface);
  position: sticky;
  top: 0;
}
.mgr-users-row td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(62,62,66,0.4);
  vertical-align: middle;
}
.mgr-users-row:last-child td { border-bottom: none; }
.mgr-users-row:hover td { background: var(--mgr-surface-hi); }

/* Identity */
.mgr-users-identity { display: flex; align-items: center; gap: 10px; }
.mgr-users-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(197,134,192,0.18);
  border: 1px solid rgba(197,134,192,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem; font-weight: 700;
  color: var(--mgr-accent);
  flex-shrink: 0;
}
.mgr-users-username { font-family: var(--mgr-mono); font-size: 0.8rem; font-weight: 600; color: var(--mgr-text); }
.mgr-users-fullname { font-size: 0.7rem; color: var(--mgr-muted); margin-top: 1px; }
.mgr-users-email { font-family: var(--mgr-mono); font-size: 0.75rem; color: var(--mgr-muted); }
.mgr-users-date { font-family: var(--mgr-mono); font-size: 0.73rem; color: var(--mgr-muted); white-space: nowrap; }

/* Rank badge */
.mgr-users-rank-badge {
  display: inline-block;
  font-size: 0.7rem; font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(197,134,192,0.1);
  color: var(--mgr-accent);
  white-space: nowrap;
}

/* Status badges */
.mgr-users-badge {
  display: inline-block;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}
.mgr-users-badge--active   { background: rgba(78,201,176,0.12);  color: var(--mgr-success); }
.mgr-users-badge--inactive { background: rgba(133,133,133,0.12); color: var(--mgr-muted); }
.mgr-users-badge--ban      { background: rgba(241,76,76,0.12);   color: var(--mgr-danger); }

/* Edit button */
.mgr-users-edit-btn {
  display: inline-block;
  text-decoration: none;
  background: none;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 4px 12px;
  white-space: nowrap;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.mgr-users-edit-btn:hover {
  border-color: var(--mgr-accent);
  color: var(--mgr-accent);
  background: rgba(197,134,192,0.08);
}
.mgr-users-empty { padding: 40px 20px; text-align: center; color: var(--mgr-muted); font-size: 0.85rem; }

/* Modal */
.mgr-users-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 200; }
.mgr-users-modal-backdrop--open { display: block; }
.mgr-users-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.97);
  opacity: 0;
  pointer-events: none;
  z-index: 201;
  width: 100%; max-width: 440px;
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.mgr-users-modal--open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.mgr-users-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--mgr-border);
}
.mgr-users-modal-title { font-family: var(--mgr-mono); font-size: 1rem; font-weight: 700; color: var(--mgr-text); }
.mgr-users-modal-sub { font-size: 0.75rem; color: var(--mgr-muted); margin-top: 2px; font-family: var(--mgr-mono); }
.mgr-users-modal-close { background: none; border: none; color: var(--mgr-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 4px; transition: color 0.1s; }
.mgr-users-modal-close:hover { color: var(--mgr-danger); }
.mgr-users-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.mgr-users-modal-field { display: flex; flex-direction: column; gap: 6px; }
.mgr-users-modal-field--row { flex-direction: row; align-items: center; justify-content: space-between; }
.mgr-users-modal-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mgr-muted); }
.mgr-users-rank-select { appearance: none; cursor: pointer; }

/* Toggle */
/* Interruptor.
   La apariencia la pinta manager_theme.css, que coloca la pista con
   position:absolute e inset:0. Eso necesita que la etiqueta sea el bloque de
   referencia: sin position:relative aquí, la pista se ancla al antepasado
   posicionado más cercano y el interruptor desaparece. .mgr-toggle ya lo
   tenía; este no, y por eso se perdió el de Modo mantenimiento.
   El botón lo dibuja el tema con ::before, así que aquí no se dibuja otro. */
.mgr-users-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 23px;
  flex-shrink: 0;
  cursor: pointer;
}
.mgr-users-toggle input { display: none; }

.mgr-users-modal-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; padding: 14px 20px;
  border-top: 1px solid var(--mgr-border);
}
.mgr-users-modal-fb { font-size: 0.8rem; font-weight: 600; flex: 1; }
.mgr-users-modal-fb--ok  { color: var(--mgr-success); }
.mgr-users-modal-fb--err { color: var(--mgr-danger); }
.mgr-users-modal-save {
  background: var(--mgr-accent);
  border: none;
  border-radius: var(--mgr-rad-sm);
  color: #fff; cursor: pointer;
  font-size: 0.85rem; font-weight: 700;
  padding: 8px 20px;
  transition: background 0.15s;
}
.mgr-users-modal-save:hover { background: var(--mgr-accent-hov); }
.mgr-users-modal-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* Responsive — card view */
@media (max-width: 480px) {
  .mgr-users-table thead { display: none; }
  .mgr-users-table,
  .mgr-users-table tbody,
  .mgr-users-table tr,
  .mgr-users-table td { display: block; width: 100%; }
  .mgr-users-row td { display: flex; gap: 8px; align-items: center; padding: 5px 12px; border: none; }
  .mgr-users-row {
    border: 1px solid var(--mgr-border);
    border-radius: var(--mgr-rad);
    margin-bottom: 10px;
    padding: 6px 0;
    background: var(--mgr-surface);
  }
  .mgr-users-row:hover td { background: transparent; }
  .mgr-users-row td::before {
    content: attr(data-label);
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase;
    color: var(--mgr-muted);
    letter-spacing: 0.06em;
    min-width: 68px; flex-shrink: 0;
  }
  .mgr-users-row td:first-child::before { display: none; }
  .mgr-users-row td:last-child { justify-content: flex-end; }
  .mgr-users-search-input { max-width: none; }
  .mgr-users-modal { max-width: calc(100vw - 24px); }
}

/* ============================================================
   === User Edit Page ===
   ============================================================ */

#mgr-uedit-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Back link */
.mgr-uedit-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--mgr-muted);
  text-decoration: none;
  transition: color 0.12s;
}
.mgr-uedit-back:hover { color: var(--mgr-accent); }

/* Header card */
.mgr-uedit-header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-left: 3px solid var(--mgr-accent);
  border-radius: var(--mgr-rad);
  padding: 20px 24px;
}

.mgr-uedit-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(197,134,192,0.15);
  border: 2px solid rgba(197,134,192,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--mgr-accent);
  flex-shrink: 0;
  font-family: var(--mgr-mono);
}

.mgr-uedit-header-info { flex: 1; min-width: 0; }

.mgr-uedit-username {
  font-family: var(--mgr-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mgr-text);
  margin-bottom: 4px;
}

.mgr-uedit-meta {
  font-size: 0.75rem;
  color: var(--mgr-muted);
  font-family: var(--mgr-mono);
  margin-bottom: 8px;
}

.mgr-uedit-sep { margin: 0 6px; }

.mgr-uedit-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Pills for staff/superuser/verified */
.mgr-uedit-pill {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}
.mgr-uedit-pill--super { background: rgba(197,134,192,0.15); color: var(--mgr-accent); }
.mgr-uedit-pill--staff { background: rgba(86,156,214,0.15); color: #569cd6; }
.mgr-uedit-pill--ok    { background: rgba(78,201,176,0.15); color: var(--mgr-success); }

/* Two-column layout */
.mgr-uedit-cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

/* Form card */
.mgr-uedit-form-card { height: auto; }

.mgr-uedit-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 20px;
}

.mgr-uedit-field { display: flex; flex-direction: column; gap: 6px; }

.mgr-uedit-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mgr-muted);
}

.mgr-uedit-err {
  font-size: 0.72rem;
  color: var(--mgr-danger);
}

.mgr-uedit-input--err { border-color: var(--mgr-danger) !important; }

/* is_active toggle row */
.mgr-uedit-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--mgr-border);
  border-bottom: 1px solid var(--mgr-border);
  margin-bottom: 20px;
}

.mgr-uedit-toggle-hint {
  font-size: 0.72rem;
  color: var(--mgr-muted);
  margin-top: 2px;
}

/* Save button */
.mgr-uedit-actions { display: flex; justify-content: flex-end; }

.mgr-uedit-save-btn {
  background: var(--mgr-accent);
  border: none;
  border-radius: var(--mgr-rad-sm);
  color: #fff;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 28px;
  transition: background 0.15s;
}
.mgr-uedit-save-btn:hover { background: var(--mgr-accent-hov); }

/* Success alert */
.mgr-uedit-alert {
  padding: 10px 14px;
  border-radius: var(--mgr-rad-sm);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.mgr-uedit-alert--ok {
  background: rgba(78,201,176,0.1);
  border: 1px solid rgba(78,201,176,0.3);
  color: var(--mgr-success);
}

/* Aside */
.mgr-uedit-aside { display: flex; flex-direction: column; gap: 16px; }
.mgr-uedit-ro-card { overflow: hidden; }
.mgr-uedit-ro-card--ban { border-color: rgba(241,76,76,0.3); }

.mgr-uedit-ro-body { padding: 4px 0 8px; }

.mgr-uedit-ro-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(62,62,66,0.35);
}
.mgr-uedit-ro-row:last-child { border-bottom: none; }
.mgr-uedit-ro-row--col { flex-direction: column; gap: 4px; align-items: flex-start; }

.mgr-uedit-ro-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mgr-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.mgr-uedit-ro-val {
  font-size: 0.78rem;
  color: var(--mgr-text);
  text-align: right;
}
.mgr-uedit-ro-mono { font-family: var(--mgr-mono); font-size: 0.73rem; }

.mgr-uedit-ro-bool {
  font-size: 0.75rem;
  font-weight: 600;
}
.mgr-uedit-ro-bool--yes { color: var(--mgr-success); }
.mgr-uedit-ro-bool--no  { color: var(--mgr-muted); }

.mgr-uedit-ban-link {
  font-size: 0.75rem;
  color: var(--mgr-danger);
  text-decoration: none;
}
.mgr-uedit-ban-link:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
  .mgr-uedit-cols { grid-template-columns: 1fr; }
  .mgr-uedit-aside { order: -1; }
}
@media (max-width: 480px) {
  .mgr-uedit-field-grid { grid-template-columns: 1fr; }
  .mgr-uedit-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mgr-uedit-avatar { width: 44px; height: 44px; font-size: 1.2rem; }
}

/* user_edit ban/whitelist card extras */
.mgr-uedit-danger-title { color: var(--mgr-danger) !important; }
.mgr-uedit-wl-title     { color: var(--mgr-success) !important; }
.mgr-uedit-ro-card--wl  { border-color: rgba(78,201,176,0.3); }

/* ============================================================
   === Rangos ===
   ============================================================ */

#mgr-ranks-page { display: flex; flex-direction: column; gap: 20px; }

.mgr-ranks-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mgr-ranks-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mgr-text);
  margin-bottom: 4px;
}
.mgr-ranks-sub { font-size: 0.75rem; color: var(--mgr-muted); }
.mgr-ranks-count { font-size: 0.72rem; color: var(--mgr-muted); white-space: nowrap; }

/* Grid */
.mgr-ranks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}

/* Card */
.mgr-rank-card {
  position: relative;
  background: var(--mgr-surface);
  border: 1px solid var(--mgr-border);
  border-left: 3px solid var(--rank-color, var(--mgr-accent));
  border-radius: var(--mgr-rad);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Watermark number */
.mgr-rank-watermark {
  position: absolute;
  top: 6px;
  right: 14px;
  font-family: var(--mgr-mono);
  font-size: 4rem;
  font-weight: 900;
  color: var(--rank-color, var(--mgr-accent));
  opacity: 0.07;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Card header */
.mgr-rank-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--mgr-border);
  position: relative;
}

.mgr-rank-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mgr-text);
  margin-bottom: 2px;
}

.mgr-rank-meta {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rank-color, var(--mgr-muted));
  opacity: 0.8;
}

.mgr-rank-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--rank-color, var(--mgr-accent)) 14%, transparent);
  color: var(--rank-color, var(--mgr-accent));
  white-space: nowrap;
  flex-shrink: 0;
}

/* User list */
.mgr-rank-users {
  flex: 1;
  padding: 4px 0;
  min-height: 48px;
}

.mgr-rank-empty {
  padding: 16px;
  font-size: 0.75rem;
  color: var(--mgr-muted);
  font-style: italic;
  text-align: center;
}

.mgr-rank-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(62,62,66,0.3);
  transition: background 0.1s;
}
.mgr-rank-user-row:last-child { border-bottom: none; }
.mgr-rank-user-row:hover { background: var(--mgr-surface-hi); }

.mgr-rank-user-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mgr-rank-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rank-color, var(--mgr-accent)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--rank-color, var(--mgr-accent)) 35%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--rank-color, var(--mgr-accent));
  flex-shrink: 0;
  font-family: var(--mgr-mono);
}

.mgr-rank-username {
  display: block;
  font-family: var(--mgr-mono);
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--mgr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgr-rank-email {
  display: block;
  font-size: 0.67rem;
  color: var(--mgr-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.mgr-rank-user-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mgr-rank-remove-btn {
  background: none;
  border: none;
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 3px;
  transition: color 0.1s, background 0.1s;
}
.mgr-rank-remove-btn:hover {
  color: var(--mgr-danger);
  background: rgba(241,76,76,0.1);
}

/* Assign form */
.mgr-rank-assign {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--mgr-border);
  background: rgba(0,0,0,0.12);
}

.mgr-rank-assign-row {
  display: flex;
  gap: 6px;
}

.mgr-rank-assign-input {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem !important;
  padding: 6px 10px !important;
  height: 32px;
}

.mgr-rank-assign-btn {
  background: color-mix(in srgb, var(--rank-color, var(--mgr-accent)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--rank-color, var(--mgr-accent)) 40%, transparent);
  border-radius: var(--mgr-rad-sm);
  color: var(--rank-color, var(--mgr-accent));
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0 12px;
  height: 32px;
  white-space: nowrap;
  transition: background 0.15s;
}
.mgr-rank-assign-btn:hover {
  background: color-mix(in srgb, var(--rank-color, var(--mgr-accent)) 28%, transparent);
}
.mgr-rank-assign-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mgr-rank-assign-fb {
  display: block;
  font-size: 0.7rem;
  margin-top: 5px;
  min-height: 14px;
  font-weight: 600;
}
.mgr-rank-assign-fb--ok  { color: var(--mgr-success); }
.mgr-rank-assign-fb--err { color: var(--mgr-danger); }

/* Responsive */
@media (max-width: 480px) {
  .mgr-ranks-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   === Rangos v2 — vertical layout ===
   ============================================================ */

#mgr-ranks-page { display: flex; flex-direction: column; gap: 16px; }

/* Rank select + action buttons row */
.mgr-rk-rank-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.mgr-rk-rank-select {
  flex: 1;
  min-width: 160px;
  max-width: 260px;
  appearance: none;
  cursor: pointer;
}

.mgr-rk-assign-btn {
  background: var(--mgr-accent);
  border: none;
  border-radius: var(--mgr-rad-sm);
  color: #fff;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0 18px;
  height: 36px;
  white-space: nowrap;
  transition: background 0.15s;
}
.mgr-rk-assign-btn:hover    { background: var(--mgr-accent-hov); }
.mgr-rk-assign-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mgr-rk-remove-btn {
  background: none;
  border: 1px solid rgba(241,76,76,0.4);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-danger);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 18px;
  height: 36px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.mgr-rk-remove-btn:hover    { background: rgba(241,76,76,0.08); border-color: var(--mgr-danger); }
.mgr-rk-remove-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Feedback */
.mgr-rk-actions-fb {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 8px;
  min-height: 16px;
  display: block;
}
.mgr-rk-actions-fb--ok  { color: var(--mgr-success); }
.mgr-rk-actions-fb--err { color: var(--mgr-danger); }

/* Section count badge */
.mgr-rk-section-count {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--mgr-muted);
}

/* User list inside each rank section */
.mgr-rk-user-list { padding: 4px 0; }

.mgr-rk-empty {
  padding: 16px 20px;
  font-size: 0.8rem;
  color: var(--mgr-muted);
  font-style: italic;
}

.mgr-rk-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 20px;
  border-bottom: 1px solid rgba(62,62,66,0.35);
  transition: background 0.1s;
}
.mgr-rk-user-row:last-child { border-bottom: none; }
.mgr-rk-user-row:hover { background: var(--mgr-surface-hi); }

.mgr-rk-user-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mgr-rk-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(197,134,192,0.15);
  border: 1px solid rgba(197,134,192,0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mgr-accent);
  flex-shrink: 0;
  font-family: var(--mgr-mono);
}

.mgr-rk-user-info { display: flex; flex-direction: column; min-width: 0; }

.mgr-rk-username {
  font-family: var(--mgr-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mgr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgr-rk-email {
  font-size: 0.7rem;
  color: var(--mgr-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgr-rk-user-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.mgr-rk-row-remove {
  background: none;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  white-space: nowrap;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.mgr-rk-row-remove:hover {
  color: var(--mgr-danger);
  border-color: rgba(241,76,76,0.5);
  background: rgba(241,76,76,0.06);
}
.mgr-rk-row-remove:disabled { opacity: 0.4; cursor: not-allowed; }

/* Responsive */
@media (max-width: 480px) {
  .mgr-rk-rank-row { flex-direction: column; align-items: stretch; }
  .mgr-rk-rank-select { max-width: none; }
  .mgr-rk-assign-btn,
  .mgr-rk-remove-btn { width: 100%; justify-content: center; }
  .mgr-rk-user-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mgr-rk-user-right { width: 100%; justify-content: space-between; }
}

/* ============================================================
   === Configuración Web ===
   ============================================================ */

#mgr-webcfg-page { display: flex; flex-direction: column; gap: 16px; }

.mgr-webcfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.mgr-webcfg-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mgr-text);
  margin-bottom: 4px;
}

.mgr-webcfg-desc {
  font-size: 0.75rem;
  color: var(--mgr-muted);
  max-width: 460px;
}

.mgr-webcfg-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.mgr-webcfg-fb {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 14px;
  min-height: 16px;
}
.mgr-webcfg-fb--ok  { color: var(--mgr-success); }
.mgr-webcfg-fb--err { color: var(--mgr-danger); }

/* ============================================================
   === Seguridad ===
   ============================================================ */

#mgr-sec-page { display: flex; flex-direction: column; gap: 16px; }

/* ── Stats grid ─────────────────────────────────────────────── */
.mgr-sec-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.mgr-sec-stat-card {
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  padding: 14px 16px;
  text-align: center;
}

.mgr-sec-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--mgr-text);
  font-family: var(--mgr-mono);
  line-height: 1;
  margin-bottom: 4px;
}

.mgr-sec-stat-label {
  font-size: 0.72rem;
  color: var(--mgr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Config grid ─────────────────────────────────────────────── */
.mgr-sec-cfg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.mgr-sec-cfg-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mgr-sec-save-btn {
  padding: 7px 18px;
  background: var(--mgr-accent);
  border: none;
  border-radius: var(--mgr-rad-sm);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.mgr-sec-save-btn:hover { background: var(--mgr-accent-hov); }

/* ── Log table ───────────────────────────────────────────────── */
.mgr-sec-log-info {
  font-size: 0.75rem;
  color: var(--mgr-muted);
  margin-bottom: 10px;
}

.mgr-sec-log-wrap {
  overflow-x: auto;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
}

.mgr-sec-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.mgr-sec-log-table th {
  background: var(--mgr-surface-hi);
  color: var(--mgr-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--mgr-border);
  white-space: nowrap;
}

.mgr-sec-log-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--mgr-border);
  vertical-align: middle;
}

.mgr-sec-log-table tr:last-child td { border-bottom: none; }
.mgr-sec-log-table tbody tr:hover   { background: var(--mgr-surface-hi); }

.mgr-sec-log-ts {
  font-family: var(--mgr-mono);
  font-size: 0.76rem;
  color: var(--mgr-muted);
  white-space: nowrap;
}

.mgr-sec-log-ip {
  font-family: var(--mgr-mono);
  font-size: 0.8rem;
  white-space: nowrap;
}

.mgr-sec-log-empty {
  text-align: center;
  color: var(--mgr-muted);
  padding: 24px;
  font-size: 0.82rem;
}

/* ── Event badges ────────────────────────────────────────────── */
.mgr-sec-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--mgr-mono);
  background: var(--mgr-surface-hi);
  color: var(--mgr-muted);
}
.mgr-sec-badge--warn   { background: rgba(220,220,170,0.15); color: var(--mgr-warn);     }
.mgr-sec-badge--danger { background: rgba(241,76,76,0.15);   color: var(--mgr-danger);   }
.mgr-sec-badge--orange { background: rgba(206,145,120,0.15); color: var(--mgr-net-up);   }
.mgr-sec-badge--info   { background: rgba(86,156,214,0.15);  color: var(--mgr-net-down); }

/* ── Header action buttons ───────────────────────────────────── */
.mgr-sec-log-actions { display: flex; gap: 8px; align-items: center; }

.mgr-sec-refresh-btn,
.mgr-sec-clear-btn {
  background: none;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  font-size: 0.78rem;
  padding: 4px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mgr-sec-refresh-btn:hover {
  color: var(--mgr-text);
  border-color: var(--mgr-text);
}
.mgr-sec-clear-btn {
  border-color: rgba(241,76,76,0.3);
  color: var(--mgr-danger);
}
.mgr-sec-clear-btn:hover {
  border-color: var(--mgr-danger);
  background: rgba(241,76,76,0.06);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mgr-sec-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .mgr-sec-cfg-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .mgr-sec-stats-grid { grid-template-columns: 1fr 1fr; }
  .mgr-sec-log-actions { flex-wrap: wrap; }
}

/* ============================================================
   === Chat — consola de triaje ===

   El eje es el tiempo de espera, no el hilo de burbujas. La cola se
   colorea por antigüedad y la transcripción dice de quién es el turno.

   Roles de color, tomados de la paleta del panel:
     azul   #569cd6  mensaje entrante (cliente)
     morado #c586c0  mensaje saliente (nosotros)
     amarillo → naranja → rojo  espera que envejece
   ============================================================ */

.mgr-chat-page {
  /* Ocupa todo el hueco bajo la barra superior, anulando el padding
     de .mgr-content: una bandeja de entrada va a sangre. */
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: calc(100vh - var(--mgr-topbar-h));
  margin: calc(var(--mgr-content-pad-y) * -1) calc(var(--mgr-content-pad-x) * -1);
  background: var(--mgr-bg);
  overflow: hidden;
}

/* ── Cola ──────────────────────────────────────────────────── */

.mgr-chat-queue {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--mgr-border);
  background: var(--mgr-surface);
}

.mgr-chat-queue__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--mgr-border);
}

.mgr-chat-queue__title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mgr-muted);
}

/* Cuántas esperan respuesta. Es el número que decide si hay trabajo. */
.mgr-chat-queue__pending {
  font-family: var(--mgr-mono);
  font-size: 0.7rem;
  color: var(--mgr-warn);
}

.mgr-chat-queue__items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mgr-chat-placeholder {
  padding: 28px 18px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--mgr-muted);
}

/* -- Fila de la cola --
   La estructura la define ahora manager_theme.css (.mgr-chat-item,
   .mgr-chat-name, .mgr-chat-last, .mgr-chat-ago y el menu de acciones).
   Aqui solo quedan los modificadores de color del reloj de espera, propios
   de esta app, que el tema no define. El grid antiguo de .mgr-chat-row se
   elimino: aplastaba el .mgr-chat-item en su primera columna de 30px. */

.mgr-chat-age--warm { color: var(--mgr-warn); }
.mgr-chat-age--hot  { color: var(--mgr-net-up); }
.mgr-chat-age--cold { color: var(--mgr-danger); }

/* ── Panel de transcripción ────────────────────────────────── */

.mgr-chat-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--mgr-bg);
}

.mgr-chat-blank {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
}

.mgr-chat-blank__lead {
  font-size: 0.92rem;
  color: var(--mgr-text);
}

.mgr-chat-blank__hint {
  max-width: 34ch;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--mgr-muted);
}

.mgr-chat-thread__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mgr-chat-thread__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--mgr-border);
  background: var(--mgr-surface);
}

.mgr-chat-thread__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mgr-chat-thread__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mgr-text);
}

.mgr-chat-thread__state {
  font-family: var(--mgr-mono);
  font-size: 0.7rem;
  color: var(--mgr-muted);
}

.mgr-chat-thread__state.is-waiting { color: var(--mgr-warn); }

.mgr-chat-back {
  display: none;
  padding: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  background: var(--mgr-bg);
  color: var(--mgr-text);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.mgr-chat-back:hover { background: var(--mgr-surface-hi); }

/* ── Registro de mensajes ──────────────────────────────────── */

.mgr-chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Columna centrada de 900px como mucho: en pantallas anchas la
     transcripción se dispersaba y costaba seguir el hilo. La barra de
     scroll se queda en el borde, no en la columna. */
  padding: 20px max(20px, (100% - 900px) / 2) 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Separador de día: filete con la fecha en mono, sin adorno. */
.mgr-chat-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
  font-family: var(--mgr-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mgr-muted);
}

.mgr-chat-day::before,
.mgr-chat-day::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mgr-border);
}

/* Mensajes: la burbuja la pinta manager_theme.css (.mgr-chat-bubble).
   Aqui solo queda la alineacion segun quien habla y la hora, porque la
   tarjeta que dibujaba este bloque dejaba un recuadro dentro de otro. */
.mgr-chat-msg          { max-width: 100%; }
.mgr-chat-msg          { align-self: flex-start; }
.mgr-chat-msg--out     { align-self: flex-end; }

.mgr-chat-msg__time {
  display: block;
  margin-top: 5px;
  font-family: var(--mgr-mono);
  font-size: 0.66rem;
  color: var(--mgr-muted);
  font-variant-numeric: tabular-nums;
}

.mgr-chat-msg--out .mgr-chat-msg__time { text-align: right; }

.mgr-chat-msg.is-fresh { animation: mgr-chat-in 0.18s ease-out; }

@keyframes mgr-chat-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* El mismo reloj de la cola, al pie: de quién es el turno. */
.mgr-chat-pending-mark {
  align-self: center;
  margin: 2px 0 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: transparent;
  background: color-mix(in srgb, var(--mgr-warn) 12%, transparent);
  border: 1px solid var(--mgr-border);
  border-color: color-mix(in srgb, var(--mgr-warn) 35%, transparent);
  font-family: var(--mgr-mono);
  font-size: 0.68rem;
  color: var(--mgr-warn);
}

/* ── Compositor ────────────────────────────────────────────── */

.mgr-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--mgr-border);
  background: var(--mgr-surface);
}

.mgr-chat-composer__field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.mgr-chat-composer textarea {
  display: block;
  width: 100%;
  max-height: 160px;
  padding: 10px 68px 10px 13px;
  resize: none;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad);
  background: var(--mgr-bg);
  color: var(--mgr-text);
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
  transition: border-color 0.12s ease;
}

.mgr-chat-composer textarea::placeholder { color: var(--mgr-muted); }

.mgr-chat-composer textarea:focus {
  outline: none;
  border-color: var(--mgr-accent);
}

.mgr-chat-count {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-family: var(--mgr-mono);
  font-size: 0.64rem;
  color: var(--mgr-muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.mgr-chat-count.is-near { color: var(--mgr-warn); }
.mgr-chat-count.is-full { color: var(--mgr-danger); }

.mgr-chat-send {
  flex: none;
  padding: 10px 18px;
  border: 1px solid var(--mgr-accent);
  border-radius: var(--mgr-rad);
  background: var(--mgr-accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.mgr-chat-send:hover:not(:disabled) {
  background: var(--mgr-accent-hov);
  border-color: var(--mgr-accent-hov);
}

.mgr-chat-send:disabled { opacity: 0.45; cursor: default; }

.mgr-chat-error {
  padding: 0 20px 14px;
  font-size: 0.78rem;
  color: var(--mgr-danger);
  background: var(--mgr-surface);
}

/* ── Móvil: una sola columna, cola o hilo, nunca los dos ───── */

@media (max-width: 720px) {
  .mgr-chat-page {
    grid-template-columns: 1fr;
    position: relative;
  }
  .mgr-chat-queue {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-right: 0;
  }
  .mgr-chat-list--hidden { display: none; }
  .mgr-chat-thread { position: absolute; inset: 0; }
  .mgr-chat-back { display: grid; place-items: center; }
  .mgr-chat-msg { max-width: 88%; }
  .mgr-chat-log { padding: 16px 14px 6px; }
  .mgr-chat-composer { padding: 10px 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mgr-chat-msg.is-fresh { animation: none; }
  .mgr-chat-row,
  .mgr-chat-send,
  .mgr-chat-composer textarea { transition: none; }
}


/* ============================================================
   === Paginación de usuarios ===
   Añadida en la migración a PHP: la vista Django cargaba todos
   los usuarios en una sola consulta.
   ============================================================ */
.mgr-users-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid var(--mgr-border);
}

.mgr-users-pager-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--mgr-border);
  background: var(--mgr-surface-2);
  color: var(--mgr-text);
  font-size: 0.8rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.mgr-users-pager-btn:hover {
  background: var(--mgr-surface-3);
  border-color: var(--mgr-accent);
}

.mgr-users-pager-btn--off {
  opacity: 0.35;
  pointer-events: none;
}

.mgr-users-pager-info {
  font-size: 0.8rem;
  color: var(--mgr-muted);
}

/* ── Chat: botón de acciones de cada conversación ──────────────
   manager_theme.css posiciona el menú desplegable en absoluto sobre la fila
   (top:38px right:12px) pero no da posición al botón que lo abre, así que
   caía debajo de la fila. Se ancla aquí, alineado con el menú. */
.mgr-chat-row > .mgr-chat-menu-btn {
  position: absolute;
  top: 11px;
  right: 12px;
  z-index: 2;
}

/* Deja sitio a la derecha para que el botón no tape la hora. */
.mgr-chat-row > .mgr-chat-item { padding-right: 40px; }

/* ── Submenú de sección ────────────────────────────────────────
   Pestañas dentro de una página del panel (por ejemplo Configuración
   Web → Modo mantenimiento / Horario del servidor). Va encima del
   título, y marca la activa con un filete del color de acento. */
.mgr-subnav {
  display: flex;
  gap: 2px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--mgr-border);
  overflow-x: auto;
}

.mgr-subnav__link {
  padding: 9px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--mgr-muted);
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color .14s, border-color .14s;
}

.mgr-subnav__link:hover { color: var(--mgr-text); }

.mgr-subnav__link.is-active {
  color: var(--mgr-accent);
  border-bottom-color: var(--mgr-accent);
}

.mgr-subnav__link:focus-visible {
  outline: 2px solid var(--mgr-accent);
  outline-offset: -2px;
}

/* ============================================================
   === Códigos de Registro y Config de registro ===
   Compartido por el panel y las pantallas públicas de alta:
   los mismos dígitos se ven igual donde se emiten y donde se
   escriben.
   ============================================================ */

/* Casilla de 6 dígitos: monoespaciada y espaciada, que es como se
   leen los códigos al copiarlos de un correo. */
.mgr-code-input {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem;
  letter-spacing: 0.5em;
  text-align: center;
  padding-left: 0.5em;
}

.mgr-field-err {
  color: var(--lg-danger, var(--mgr-danger));
  font-size: 0.78rem;
  margin: 6px 0 0;
}

/* Botón secundario del panel: mismo peso visual que .mgr-preset-btn, pero
   toma el acento del usuario en vez de un morado fijo. Se usa también en las
   pantallas públicas, donde manda la paleta --lg-*. */
.mgr-btn-ghost {
  background: var(--lg-input, var(--mgr-surface-hi));
  border: 1px solid var(--lg-border, var(--mgr-border));
  border-radius: var(--mgr-rad-sm, 4px);
  color: var(--lg-muted, var(--mgr-muted));
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.mgr-btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lg-accent, var(--mgr-accent)) 12%, transparent);
  border-color: var(--lg-accent, var(--mgr-accent));
  color: var(--lg-accent, var(--mgr-accent));
}

.mgr-btn-ghost:disabled { opacity: 0.5; cursor: default; }

/* Borrar: el rojo lo pone el tema, no el acento — es la única acción de la
   página que no se puede deshacer. */
.mgr-btn-danger {
  background: none;
  border: 1px solid color-mix(in srgb, var(--mgr-danger) 40%, transparent);
  border-radius: var(--mgr-rad-sm, 4px);
  color: var(--mgr-danger);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.mgr-btn-danger:hover {
  background: color-mix(in srgb, var(--mgr-danger) 10%, transparent);
  border-color: var(--mgr-danger);
}

.mgr-resend { margin-top: 14px; text-align: center; }

.mgr-code-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.mgr-code-chip {
  display: inline-block;
  background: var(--mgr-surface-2, var(--mgr-surface));
  border: 1px solid var(--mgr-border);
  border-radius: 4px;
  color: var(--mgr-text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  padding: 5px 10px;
}

/* Cantidad y caducidad: radios pintados como pastillas. El input
   numérico vive en la misma fila y solo se enciende con Custom. */
.mgr-rc-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* El radio real desaparece pero sigue siendo el que recibe el foco y el
   teclado: la pastilla es su <span>, no un div con onclick. */
.mgr-rc-choice { display: inline-flex; margin: 0; }

.mgr-rc-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mgr-rc-choice span {
  display: inline-block;
  background: var(--mgr-surface-hi);
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 16px;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.mgr-rc-choice span:hover {
  border-color: var(--mgr-muted);
  color: var(--mgr-text);
}

/* Marcado: mismo tratamiento que .mgr-preset-btn.active, pero derivado del
   acento elegido en el panel para que cambie con él. */
.mgr-rc-choice input:checked + span {
  background: color-mix(in srgb, var(--mgr-accent) 15%, transparent);
  border-color: var(--mgr-accent);
  color: var(--mgr-accent);
  font-weight: 600;
}

.mgr-rc-choice input:focus-visible + span {
  outline: 2px solid var(--mgr-accent);
  outline-offset: 2px;
}

/* La casilla del valor libre solo existe con Custom marcado: enseñarla
   siempre invita a escribir en un campo que no se va a leer. */
.mgr-rc-num {
  width: 120px;
  background: var(--mgr-bg);
  border: 1px solid var(--mgr-accent);
  border-radius: var(--mgr-rad-sm);
  color: var(--mgr-text);
  font-size: 0.85rem;
  padding: 7px 10px;
}

.mgr-rc-num[hidden] { display: none; }

/* Horas + minutos: dos casillas estrechas con su unidad pegada, para que se
   lean como una sola duración y no como dos ajustes sueltos. */
.mgr-rc-duration {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mgr-rc-duration[hidden] { display: none; }

.mgr-rc-duration label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.mgr-rc-duration .mgr-rc-num { width: 76px; }

.mgr-rc-unit {
  color: var(--mgr-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.mgr-rc-form .mgr-label { margin-bottom: 8px; }

.mgr-rc-form .mgr-btn-primary { width: auto; padding: 11px 26px; }

/* Los dos tiempos de la verificación por correo, uno al lado del
   otro mientras quepan. */
.mgr-verify-times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 18px;
  margin-top: 14px;
}

.mgr-verify-times[hidden] { display: none; }

/* Casilla "Recordarme" del login público. Usa --lg-* como el resto de esa
   pantalla, con los tokens del panel como respaldo. */
.mgr-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -4px 0 16px;
  color: var(--lg-muted, var(--mgr-muted));
  font-size: 0.84rem;
  cursor: pointer;
  user-select: none;
}

.mgr-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--lg-accent, var(--mgr-accent));
  cursor: pointer;
  margin: 0;
}

.mgr-check:hover { color: var(--lg-text, var(--mgr-text)); }

/* Opciones de apagado de una pantalla pública: cuelgan de su interruptor,
   así que se sangran para que se lean como parte de esa fila. */
.mgr-off-modes {
  margin: -2px 0 18px;
  padding: 14px 16px;
  border-left: 2px solid var(--mgr-border);
  background: color-mix(in srgb, var(--mgr-surface-hi) 55%, transparent);
  border-radius: 0 var(--mgr-rad-sm) var(--mgr-rad-sm) 0;
}

.mgr-off-modes[hidden] { display: none; }

.mgr-off-modes .mgr-label { margin-bottom: 9px; }
.mgr-off-modes .mgr-webcfg-desc { margin-top: 9px; }

/* Plantilla y textos del aviso de desactivada: cuelgan del modo elegido. */
.mgr-off-notice {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--mgr-border);
}

.mgr-off-notice[hidden] { display: none; }

.mgr-off-notice textarea.mgr-input {
  resize: vertical;
  min-height: 74px;
  font-family: inherit;
}

/* === Deployment ===
   Reaprovecha .mgr-card, .mgr-field y los botones del panel. Lo propio es la
   rejilla de la conexión y la lista de comprobaciones del alojamiento. */
#mgr-deployment .mgr-card,
#mgr-deployment > .mgr-uedit-alert { max-width: 60rem; }

/* La fila del interruptor y el aviso que la sigue son dos cosas distintas:
   sin este aire el recordatorio de borrar la carpeta parecía parte de la
   descripción del interruptor. */
#mgr-deployment .mgr-note { margin-top: 18px; margin-bottom: 0; }

/* La descripción respira bajo su etiqueta, como en Funciones Web. */
#mgr-deployment .mgr-webcfg-desc { margin-top: 4px; }

/* Frase que abre una tarjeta, y pistas bajo los campos. En texto normal, no
   en el monoespaciado de Monitoreo: aquí son instrucciones que se leen, no
   datos que se comparan. */
.mgr-deploy-lead {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--mgr-muted);
  margin: 0 0 18px;
}

.mgr-deploy-hint {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--mgr-faint);
  margin: 6px 0 0;
}

/* Tres columnas como máximo: con auto-fit, una pantalla ancha ponía los seis
   campos en una sola fila y la conexión se leía como una tira de texto. */
.mgr-deploy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
}

.mgr-deploy-grid .mgr-field { margin-bottom: 0; }

.mgr-deploy-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.mgr-deploy-row .mgr-field { flex: 0 1 260px; margin-bottom: 0; }
.mgr-deploy-btn { width: auto; margin-top: 0; }

.mgr-deploy-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--mgr-border);
}
.mgr-deploy-actions .mgr-btn-primary,
.mgr-deploy-actions .mgr-btn-ghost { width: auto; margin-top: 0; }

/* El resultado de la prueba vive al lado de los botones: es la respuesta a
   lo que se acaba de pulsar, no un aviso de la página. Va a su propia línea
   porque trae el mensaje de MySQL entero, que es largo. */
.mgr-deploy-fb {
  font-size: 0.82rem; font-weight: 600; color: var(--mgr-muted);
  flex-basis: 100%; overflow-wrap: anywhere; line-height: 1.5;
}
.mgr-deploy-fb.is-ok  { color: var(--mgr-success); }
.mgr-deploy-fb.is-bad { color: var(--mgr-danger); }

.mgr-deploy-note { margin-top: 16px; }

/* Comprobaciones del alojamiento: filas separadas por una línea, con el
   detalle —ruta o versión— alineado a la derecha y en monoespaciado, que ahí
   sí es un dato que se compara de un vistazo. */
.mgr-deploy-checks { list-style: none; margin: 0; padding: 0; }

.mgr-deploy-check {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 2px;
  font-size: 0.85rem; color: var(--mgr-text);
  border-bottom: 1px solid var(--mgr-border);
}
.mgr-deploy-check:last-child { border-bottom: 0; }

.mgr-deploy-check__mark { font-weight: 700; width: 1rem; flex-shrink: 0; }
.mgr-deploy-check.is-ok  .mgr-deploy-check__mark { color: var(--mgr-success); }
.mgr-deploy-check.is-bad .mgr-deploy-check__mark { color: var(--mgr-danger); }
.mgr-deploy-check.is-bad .mgr-deploy-check__label { color: var(--mgr-text-hi); }

.mgr-deploy-check__detail {
  margin-left: auto;
  font-family: var(--mgr-mono);
  font-size: 0.72rem;
  color: var(--mgr-faint);
  text-align: right;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .mgr-deploy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .mgr-deploy-grid { grid-template-columns: 1fr; }
  .mgr-deploy-check { flex-wrap: wrap; }
  .mgr-deploy-check__detail { margin-left: 1.75rem; text-align: left; }
}

/* === Setup wizard === */
/* Página suelta: el asistente corre fuera del panel, sin sidebar ni topbar,
   pero con mgr-root en el body para heredar reset, fondo y scrollbars. */
.mgr-setup-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 64px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--mgr-text);
}

.mgr-setup-card { width: min(52rem, 100%); }

.mgr-setup-steps {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  flex-wrap: wrap;
}

.mgr-setup-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--mgr-faint);
}

.mgr-setup-step.is-done { color: var(--mgr-muted); }

.mgr-setup-step.is-active {
  color: var(--mgr-text-hi);
  font-weight: 600;
}

.mgr-setup-step__n {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--mgr-border-hi);
  background: var(--mgr-surface);
  color: var(--mgr-faint);
  font-family: var(--mgr-mono);
  font-size: .68rem;
  font-weight: 700;
}

.mgr-setup-step.is-active .mgr-setup-step__n {
  background: var(--mgr-accent);
  border-color: var(--mgr-accent);
  color: var(--mgr-on-accent);
}

.mgr-setup-step.is-done .mgr-setup-step__n {
  border-color: var(--mgr-success);
  color: var(--mgr-success);
}

/* La etiqueta del requisito que corta el paso, al lado de su nombre. */
.mgr-setup-req-tag {
  font-family: var(--mgr-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mgr-warn);
}

/* El grid de campos del panel se queda a dos columnas aquí: la ventana del
   asistente es más estrecha que el contenido del panel. */
.mgr-setup-page .mgr-deploy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mgr-setup-page .mgr-deploy-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* Los botones del login nacen a ancho completo; aquí van en fila. */
.mgr-setup-page .mgr-btn-primary,
.mgr-setup-page .mgr-btn-ghost {
  width: auto;
  margin-top: 0;
  padding: 9px 18px;
}

.mgr-setup-page .mgr-btn-primary[disabled] { opacity: .45; cursor: not-allowed; }

/* La pantalla final ofrece el panel con un enlace, no un botón: sin esto
   hereda el color de enlace —el mismo acento que su fondo— y el texto
   desaparece dentro del botón. */
.mgr-setup-page a.mgr-btn-primary {
  color: var(--lg-on-accent, var(--mgr-on-accent));
  text-decoration: none;
  justify-content: center;
}

/* El mensaje de la prueba de conexión trae el error de MySQL entero, que es
   largo: pasa a su propia línea y parte donde haga falta en vez de salirse
   de la tarjeta. */
.mgr-setup-page .mgr-deploy-fb {
  flex-basis: 100%;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* La descripción que abre cada paso respira antes del primer campo. */
.mgr-setup-page .mgr-card__body > .mgr-webcfg-desc { margin-bottom: 16px; }

/* El botón de regenerar la clave va debajo de su campo, no en la fila de
   acciones: pertenece al campo. */
.mgr-setup-page #mgr-setup-key { margin-top: 8px; }

@media (max-width: 640px) {
  .mgr-setup-page .mgr-deploy-grid { grid-template-columns: 1fr; }
}

/* === Soporte === */
/* Ajustes en Funciones Web: los campos no necesitan el ancho completo de la
   tarjeta, y la lista de categorías es una fila por categoría. */
.mgr-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 42rem; }

.mgr-support-cats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.mgr-support-cat.is-off { opacity: .55; }

.mgr-support-cat__form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mgr-support-cat__form .mgr-input { flex: 0 1 240px; }
.mgr-support-cat__form .mgr-btn-ghost,
.mgr-support-cat__form .mgr-btn-primary { width: auto; margin-top: 0; padding: 8px 14px; }

@media (max-width: 620px) {
  .mgr-support-grid { grid-template-columns: 1fr; }
}

/* Bandeja: filtros en línea y tabla que en móvil se apila por filas. */
/* Las dos pantallas se quedan dentro de su ancho: sin esto la tarjeta se
   estiraba con el monitor y la tabla empujaba la página hacia la derecha. */
#mgr-support .mgr-card,
#mgr-support-thread .mgr-card { max-width: 60rem; }

/* La tabla scrollea sola en vez de romper la página. */
.mgr-support-scroll { overflow-x: auto; }
.mgr-support-scroll .mgr-support-inbox { min-width: 42rem; }

.mgr-support-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mgr-support-filters .mgr-input { flex: 0 1 190px; }
.mgr-support-filters .mgr-btn-primary { width: auto; margin-top: 0; padding: 9px 18px; }
.mgr-support-mine {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--mgr-muted);
}

.mgr-support-inbox { width: 100%; border-collapse: collapse; font-size: .85rem; }
.mgr-support-inbox th {
  text-align: left; padding: 0 10px 10px;
  font-family: var(--mgr-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mgr-muted); font-weight: 700;
}
.mgr-support-inbox td { padding: 11px 10px; border-top: 1px solid var(--mgr-border); }
.mgr-support-inbox a { color: var(--mgr-text-hi); text-decoration: none; }
.mgr-support-inbox a:hover { color: var(--mgr-accent); }
.mgr-support-when {
  color: var(--mgr-faint); font-family: var(--mgr-mono); font-size: .72rem;
}

.mgr-support-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mgr-accent); margin-left: 6px; vertical-align: middle;
}

.mgr-support-state, .mgr-support-prio {
  display: inline-block;
  font-family: var(--mgr-mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
}
.mgr-support-state.is-open        { background: rgba(86,156,214,.14);  color: var(--mgr-blue); }
.mgr-support-state.is-in_progress { background: rgba(220,220,170,.14); color: var(--mgr-warn); }
.mgr-support-state.is-resolved    { background: rgba(78,201,176,.14);  color: var(--mgr-success); }
.mgr-support-state.is-closed      { background: rgba(133,133,133,.12); color: var(--mgr-muted); }
.mgr-support-prio.is-high   { color: var(--mgr-danger); }
.mgr-support-prio.is-normal { color: var(--mgr-muted); }
.mgr-support-prio.is-low    { color: var(--mgr-faint); }

@media (max-width: 760px) {
  .mgr-support-inbox thead { display: none; }
  .mgr-support-inbox tr {
    display: grid; gap: 4px; padding: 10px 0;
    border-top: 1px solid var(--mgr-border);
  }
  .mgr-support-inbox td { border: 0; padding: 0; }
}

/* Hilo: cada mensaje una tarjeta pequeña. La nota interna se distingue por
   color y etiqueta, no solo por posición: quien responde tiene que ver de un
   vistazo qué leerá el usuario. */
.mgr-support-back { margin: 0 0 14px; font-size: .82rem; }
.mgr-support-back a { color: var(--mgr-muted); text-decoration: none; }
.mgr-support-back a:hover { color: var(--mgr-accent); }

.mgr-support-thread { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }

.mgr-support-msg {
  /* Ancho de lectura, no de pantalla: un párrafo de 120 caracteres por línea
     no hay quien lo siga. */
  max-width: min(46rem, 90%);
  padding: 12px 14px;
  border-radius: var(--mgr-rad-sm);
  background: var(--mgr-raised);
  border: 1px solid var(--mgr-border);
}

/* Lo del manager a la derecha, como en la vista pública: la conversación se
   lee por lados antes que por nombres. */
.mgr-support-msg.is-manager {
  margin-left: auto;
  border-color: var(--mgr-border-hi);
  background: var(--mgr-surface-hi);
}
.mgr-support-msg.is-internal {
  background: rgba(220, 220, 170, .06);
  border-color: var(--mgr-warn);
}
.mgr-support-msg.is-system {
  max-width: 100%;
  text-align: center;
  background: transparent;
  border-style: dashed;
  color: var(--mgr-muted);
  font-size: .8rem;
}

.mgr-support-msg__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.mgr-support-msg__who { font-weight: 600; font-size: .82rem; color: var(--mgr-text-hi); }
.mgr-support-msg__tag {
  font-family: var(--mgr-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mgr-warn);
}
.mgr-support-msg__when {
  margin-left: auto; font-family: var(--mgr-mono);
  font-size: .68rem; color: var(--mgr-faint);
}
.mgr-support-msg__body { margin: 0; font-size: .87rem; line-height: 1.6; }

.mgr-support-reply textarea.mgr-input { width: 100%; resize: vertical; line-height: 1.55; }

/* El desplegable de varios managers necesita alto: sin él se ve como una caja
   vacía y no se adivina que hay nombres dentro. */
.mgr-support-assign select[multiple] {
  min-height: 8rem;
  padding: 8px 10px;
  line-height: 1.9;
}

/* Escalar es otra decisión que asignar, y con la misma pinta se leían como un
   solo formulario. */
.mgr-support-escalate {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--mgr-border);
}

/* Chat: buscador de la cola y avisos del sistema dentro del hilo. */
.mgr-chat-search { padding: 10px 12px; border-bottom: 1px solid var(--mgr-border); }
.mgr-chat-search .mgr-input { width: 100%; font-size: .82rem; }

.mgr-chat-thread__actions { display: flex; gap: 8px; margin-left: auto; }

/* El aviso de quién finalizó separa una conversación de la siguiente: no es
   de nadie, así que no lleva burbuja ni lado. */
.mgr-chat-note {
  align-self: center;
  max-width: 90%;
  margin: 10px 0;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--mgr-surface-hi);
  color: var(--mgr-muted);
  font-size: .74rem;
  text-align: center;
}
.mgr-chat-note__time { margin-left: 8px; font-family: var(--mgr-mono); font-size: .66rem; opacity: .8; }

/* Login/Registro: las tarjetas ocupan el ancho de la pantalla, pero sus filas
   no. Estiradas de lado a lado, el interruptor acababa a un palmo de su
   etiqueta en un monitor ancho y la pantalla se leía como una lista suelta de
   frases. Con un ancho de lectura, cada ajuste vuelve a leerse como una
   unidad. */
#mgr-signup-cfg .mgr-webcfg-row,
#mgr-signup-cfg .mgr-field,
#mgr-login-cfg .mgr-webcfg-row,
#mgr-login-cfg .mgr-field { max-width: 46rem; }

/* En Funciones Web el captcha es una tarjeta más: su interruptor se alinea a
   la derecha como los de Chat y Soporte —de ahí que la fila no se recorte— y
   sus campos comparten el ancho de los ajustes de soporte, justo encima. */
.mgr-captcha-cfg .mgr-field { max-width: 42rem; }

.mgr-captcha-keys {
  margin: 2px 0 18px;
  padding: 16px;
  max-width: 42rem;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  background: var(--mgr-raised);
}
.mgr-captcha-keys .mgr-deploy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mgr-captcha-keys .mgr-field { max-width: none; }

@media (max-width: 720px) {
  .mgr-captcha-keys .mgr-deploy-grid { grid-template-columns: 1fr; }
}

/* La casilla de Google trae su propio ancho fijo (302 px): se centra y se
   deja escalar en pantallas estrechas, o desborda la tarjeta del login. */
.g-recaptcha { display: flex; justify-content: center; margin: 4px 0 2px; }

@media (max-width: 360px) {
  .g-recaptcha { transform: scale(.85); transform-origin: center; }
}

/* === Social: redes y contacto ============================================ */
/* Cada fila es interruptor + campos: el interruptor va delante porque decide
   si lo de al lado se enseña, y así las seis redes se leen en columna sin
   perseguir el control al otro lado de la tarjeta. */
#mgr-social .mgr-card { max-width: 60rem; }

.mgr-social-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mgr-border);
}
.mgr-social-row:last-of-type { border-bottom: 0; }
.mgr-social-row .mgr-users-toggle { margin-bottom: 9px; flex: none; }
.mgr-social-row .mgr-field { flex: 1 1 220px; max-width: none; margin: 0; }
/* El indicativo no crece: es un código de cuatro caracteres y estirarlo tanto
   como el número haría creer que ahí va otra cosa. */
.mgr-social-row .mgr-field--dial { flex: 0 1 15rem; }
.mgr-dial { width: 100%; }
.mgr-social-row .mgr-btn-ghost { margin-bottom: 2px; flex: none; }

.mgr-social-group { margin-bottom: 26px; }
.mgr-social-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
/* El contador dice cuántos caben antes de que el botón se apague solo. */
.mgr-social-count {
  font-family: var(--mgr-mono, monospace);
  font-size: .74rem;
  color: var(--mgr-faint);
}
.mgr-social-group > .mgr-btn-ghost { margin-top: 10px; }
.mgr-social-group > .mgr-btn-ghost[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 720px) {
  .mgr-social-row { flex-wrap: wrap; align-items: center; }
  .mgr-social-row .mgr-users-toggle { margin-bottom: 0; }
  .mgr-social-row .mgr-field { flex-basis: 100%; }
}

/* Horario: siete filas iguales, así que el día manda y los relojes se alinean
   en columna sin que cada uno estire lo suyo. */
.mgr-hours-row { align-items: center; gap: 12px; flex-wrap: wrap; }
.mgr-hours-day { flex: 0 0 7rem; font-size: .86rem; font-weight: 600; color: var(--mgr-text); }
.mgr-hours-clock { display: flex; align-items: center; gap: 6px; }
.mgr-hours-lbl {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mgr-faint); flex: none;
}
.mgr-clock { width: auto; min-width: 4.5rem; padding-right: 26px; }

@media (max-width: 720px) {
  .mgr-hours-day { flex-basis: 100%; }
}

/* Rangos: coincidencias mientras se escribe. Cuelga del campo como un menú,
   sin empujar la tarjeta hacia abajo cada vez que aparece. */
.mgr-rk-results {
  position: relative;
  list-style: none;
  margin: 6px 0 0;
  padding: 4px;
  max-height: 17rem;
  overflow-y: auto;
  border: 1px solid var(--mgr-border);
  border-radius: var(--mgr-rad-sm);
  background: var(--mgr-raised);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7);
}
.mgr-rk-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--mgr-rad-sm);
  cursor: pointer;
}
.mgr-rk-result:hover,
.mgr-rk-result:focus-visible {
  background: var(--mgr-hover, rgba(255, 255, 255, .06));
  outline: none;
}
.mgr-rk-result__name { font-size: .86rem; font-weight: 600; color: var(--mgr-text); }
.mgr-rk-result__meta { font-size: .74rem; color: var(--mgr-faint); }