/* --- Recordarme: Switch moderno --- */
/* Switch Moderno con color de botón 'Iniciar sesión' */
.switch-modern {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  margin-right: 12px;
}
.switch-modern input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(var(--accent-1),.85), rgba(var(--accent-2),.75));
  border-radius: 28px;
  transition: background .2s;
  box-shadow: 0 4px 16px rgba(var(--accent-1),.18);
}
.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: #f3f5ff;
  border-radius: 50%;
  transition: transform .2s, background .2s;
  box-shadow: 0 2px 8px rgba(var(--accent-1),.18);
}
.switch-modern input:checked + .slider {
  background: linear-gradient(135deg, rgba(var(--accent-1),.95), rgba(var(--accent-2),.85));
}
.switch-modern input:checked + .slider:before {
  transform: translateX(20px);
  background: #6852e6;
}
.remember-label {
  font-weight: 600;
  color: var(--brand);
  font-size: 15px;
  margin-left: 8px;
  letter-spacing: .3px;
}

/* --- Recordarme: Toggle button --- */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 18px;
  border: 2px solid var(--brand);
  background: rgba(var(--accent-1),.10);
  color: var(--brand);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--accent-1),.10);
  transition: background .2s, color .2s, box-shadow .2s;
}
.toggle-btn[aria-pressed="true"] {
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  color: #fff;
  box-shadow: 0 4px 16px rgba(var(--accent-2),.18);
}
.toggle-icon {
  font-size: 18px;
  opacity: 0.5;
  transition: opacity .2s;
}
.toggle-btn[aria-pressed="true"] .toggle-icon {
  opacity: 1;
}
.toggle-label {
  font-weight: 600;
  letter-spacing: .2px;
}

/* --- Recordarme: Pill circular --- */
.pill-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.pill-checkbox input {
  display: none;
}
.pill-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--accent-2),.12);
  border: 2px solid var(--brand-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
  position: relative;
}
.pill-check {
  color: var(--brand-2);
  font-size: 18px;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  transform: scale(0.7);
}
.pill-checkbox input:checked + .pill-circle {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  border-color: var(--brand);
}
.pill-checkbox input:checked + .pill-circle .pill-check {
  opacity: 1;
  transform: scale(1.1);
}
.pill-label {
  color: var(--brand-2);
  font-weight: 700;
  letter-spacing: .3px;
}
:root {

  --bg: #0b0d12;

  --panel: #0f131b;

  --panel-2: #121723;

  --border: #1d2330;

  --muted: #8a94a6;

  --text: #e6e9ef;

  --brand: #7c5cff;

  --brand-2: #00d4ff;

  --accent-1: 124,92,255; /* rgb tuple for rgba() */

  --accent-2: 0,212,255;  /* rgb tuple for rgba() */

  --success: #1ec28b;

  --warn: #ffb020;

  --danger: #ff5d5d;

  --shadow: 0 8px 24px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.2);

  --radius-lg: 18px;

  --radius-md: 14px;

  --radius-sm: 10px;

}

@media (prefers-color-scheme: light) {

  :root {

    --bg: #f6f8fb;

    --panel: #ffffff;

    --panel-2: #fafdff;

    --border: #e8eef5;

    --muted: #5b6472;

    --text: #111317;

    --shadow: 0 8px 24px rgba(19,29,43,.08), 0 4px 12px rgba(19,29,43,.06);

  }

}

/* Explicit themes override (applied via data-theme on html) */

:root[data-theme='dark'] {

  --bg: #0b0d12;

  --panel: #0f131b;

  --panel-2: #121723;

  --border: #1d2330;

  --muted: #8a94a6;

  --text: #e6e9ef;

  --brand: #7c5cff;

  --brand-2: #00d4ff;

  --accent-1: 124,92,255;

  --accent-2: 0,212,255;

}

:root[data-theme='light'] {

  --bg: #f6f8fb;

  --panel: #ffffff;

  --panel-2: #fafdff;

  --border: #e8eef5;

  --muted: #5b6472;

  --text: #111317;

  --brand: #6852e6;

  --brand-2: #00bde6;

  --accent-1: 104,82,230;

  --accent-2: 0,189,230;

}

:root[data-theme='fire'] {
  --bg: #0f0a0a;
  --panel: #121012;
  --panel-2: #161015;
  --border: #2a1612;

  --muted: #e9c7b9;
  --text: #fff4ec;

  --brand: #ff7a18;
  --brand-2: #ff3e3e;
  --accent-1: 255,154,0;
  --accent-2: 255,74,74;
}

html[data-theme='fire'] body {
  background: var(--bg);
}

html[data-theme='fire'] .card {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--panel) 90%, transparent),
    color-mix(in oklab, var(--panel-2) 94%, transparent)
  );
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255, 140, 0, .06),
    inset 0 10px 30px rgba(255, 60, 0, .05);
}

html[data-theme='fire'] .nav a:hover {
  background: rgba(var(--accent-1), .10);
}
html[data-theme='fire'] .nav a.active {
  background: linear-gradient(135deg, rgba(var(--accent-1), .16), rgba(var(--accent-2), .12));
}
html[data-theme='fire'] .table thead,
html[data-theme='fire'] .table-grid thead {
  background: rgba(var(--accent-1), .10);
}
html[data-theme='fire'] .table tbody tr:hover,
html[data-theme='fire'] .table-grid tbody tr:hover {
  background: rgba(var(--accent-1), .08);
}

* { box-sizing: border-box; }

html, body {

  height: 100%;

}

*[hidden] { display: none !important; }

body {

  margin: 0;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";

  color: var(--text);

  background: var(--bg);

  letter-spacing: .2px;

}

.layout {

  display: grid;

  grid-template-columns: 260px 1fr;

  min-height: 100dvh;

  align-items: start;

}

/* Sidebar */

.sidebar {

  position: sticky;

  top: 0;

  height: 100vh;

  border-right: 1px solid var(--border);

  background: linear-gradient(180deg, var(--panel), var(--panel-2));

  padding: 18px;

  display: flex;

  flex-direction: column;

  gap: 16px;

  overflow: hidden;

  align-self: start;

}

.brand-logo { width: 22px; height: 22px; display: inline-block; }

.brand strong { font-weight: 700; letter-spacing: .3px; }

.nav { margin-top: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

.nav a {

  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center;

  padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none;

  border: 1px solid transparent;

}

.nav a svg { opacity: .9; }

.nav a:hover { background: rgba(var(--accent-1), .08); border-color: var(--border); }

.nav a.active { background: linear-gradient(135deg, rgba(var(--accent-1), .18), rgba(var(--accent-2), .14)); border-color: var(--border); }

.nav .badge { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(var(--accent-1), .14); border: 1px solid var(--border); }

.nav::-webkit-scrollbar { width: 6px; }

.nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.sidebar-brand { flex-shrink: 0; }

.sidebar-nav-area { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; }

.sidebar-extra { display: grid; gap: 10px; flex-shrink: 0; }

.sidebar-divider { border: 0; border-top: 1px solid var(--border); margin: 12px 0 0; }

.sidebar-user { flex-shrink: 0; }

.user-area { display: grid; gap: 12px; justify-items: center; }

.helper {

  border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: var(--panel-2);

}

.helper small { color: var(--muted); display:block; margin-top: 6px; line-height: 1.4; }

.text-muted { color: var(--muted); }

.text-small { font-size: 12px; }

/* Topbar */

.topbar {

  position: sticky; top: 0; z-index: 10;

  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;

  padding: 16px 22px; border-bottom: 1px solid var(--border);

  backdrop-filter: blur(10px);

  background: color-mix(in oklab, var(--panel) 86%, transparent);

}

.search {

  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center;

  background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px;

  box-shadow: var(--shadow);

}

.search input { border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }

.actions { display: flex; gap: 10px; align-items: center; }

button {

  font: inherit;

  color: inherit;

}

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 38px;

  padding: 10px 18px;

  border-radius: var(--radius-sm);

  border: 1px solid rgba(255, 255, 255, .08);

  background: color-mix(in lab, var(--panel-2) 82%, rgba(var(--accent-1), .18));

  color: var(--text);

  font-weight: 600;

  font-size: 13px;

  letter-spacing: .2px;

  cursor: pointer;

  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;

  text-decoration: none;

}

.btn:hover {

  transform: translateY(-1px);

  box-shadow: 0 8px 18px rgba(0, 0, 0, .25);

  border-color: rgba(255, 255, 255, .16);

  background: color-mix(in lab, var(--panel-2) 70%, rgba(var(--accent-1), .28));

}

.btn:active {

  transform: translateY(0);

  box-shadow: none;

}

.btn:focus-visible {

  outline: 2px solid rgba(var(--accent-1), .45);

  outline-offset: 2px;

}

.btn[disabled], .btn:disabled {

  opacity: .55;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;

}

.btn.ghost {

  background: transparent;

  border-color: rgba(255, 255, 255, .08);

  color: var(--muted);

}

.btn.ghost:hover {

  color: var(--text);

  background: rgba(var(--accent-1), .15);

  border-color: rgba(var(--accent-1), .25);

}

.btn.brand {

  background: linear-gradient(135deg, rgba(var(--accent-1), .85), rgba(var(--accent-2), .75));

  border-color: rgba(var(--accent-1), .4);

  color: #f3f5ff;

  box-shadow: 0 12px 26px rgba(var(--accent-1), .28);

}

.btn.brand:hover {

  background: linear-gradient(135deg, rgba(var(--accent-1), .95), rgba(var(--accent-2), .85));

  box-shadow: 0 16px 30px rgba(var(--accent-1), .34);

}

.btn.brand:active {

  box-shadow: 0 8px 18px rgba(var(--accent-1), .22);

}

.btn.small { padding: 6px 12px; min-height: 32px; font-size: 12px; }

.actions .btn { min-width: 120px; }

/* Main */

.main { padding: 22px; display: grid; gap: 18px; }

.grid {

  display: grid; gap: 18px;

  grid-template-columns: repeat(12, 1fr);

}

.col-3 { grid-column: span 3; }

.col-4 { grid-column: span 4; }

.col-6 { grid-column: span 6; }

.col-8 { grid-column: span 8; }

.col-12 { grid-column: span 12; }

@media (max-width: 1200px) {

  .col-3, .col-4, .col-6, .col-8 { grid-column: span 6; }

  .layout { grid-template-columns: 86px 1fr; }

  .brand strong, .nav span, .helper small, .helper b { display: none; }

  .helper { padding: 10px; }

}

@media (max-width: 720px) {

  .col-3, .col-4, .col-6, .col-8, .col-12 { grid-column: span 12; }

  .layout { grid-template-columns: 1fr; }

  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }

  .nav { overflow-y: visible; padding-right: 0; }

  .sidebar { gap: 12px; }

  .sidebar-nav-area { gap: 12px; }

}

.card {

  background: linear-gradient(180deg, var(--panel), var(--panel-2));

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);

  padding: 18px;

  display: flex;

  flex-direction: column;

  gap: 18px;

}

.card h3 { margin: 0; font-size: 16px; letter-spacing: .2px; }

.card p { margin: 0; }

.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.card-header h3 { margin: 0; }

.card-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.card-section { display: flex; flex-direction: column; gap: 12px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px) { .kpis { grid-template-columns: minmax(0, 1fr); } }

.kpi { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-2); display: grid; gap: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }

.kpi .label { color: var(--muted); font-size: 11px; letter-spacing: .3px; text-transform: uppercase; }

.kpi .value { font-size: 24px; font-weight: 700; }

.kpi .delta { font-size: 12px; }

.kpi.is-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.up { color: var(--success); }

.down { color: var(--danger); }

/* Table */

.table {

  width: 100%;

  border-radius: var(--radius-md);

  border: 1px solid var(--border);

  background: var(--panel-2);

  overflow: hidden;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);

}

.table-scroll {

  max-height: 400px;

  overflow: auto;

}

.table-scroll::-webkit-scrollbar { width: 6px; }

.table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.table-scroll { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

.table-scroll table,
.table table,
.table-grid {

  width: 100%;

  border-collapse: collapse;

}

.table thead,
.table-grid thead {

  background: rgba(var(--accent-1), .12);

  color: var(--muted);

  font-size: 12px;

  letter-spacing: .3px;

  text-transform: uppercase;

}

.table tbody tr:hover,
.table-grid tbody tr:hover { background: rgba(var(--accent-1), .10); }

.table tbody tr:last-child td,
.table-grid tbody tr:last-child td { border-bottom: none; }

.table th, .table td,
.table-grid th, .table-grid td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }

.table th, .table-grid th { color: var(--muted); font-weight: 600; }

.table-grid--events th:nth-child(1) { width: 27%; }

.table-grid--events th:nth-child(2) { width: 18%; }

.table-grid--events th:nth-child(3) { width: 35%; }

.table-grid--events th:nth-child(4) { width: 20%; }

.table-grid--events { table-layout: fixed; }

#latest-events {

  min-height: 420px;

  display: flex;

  flex-direction: column;

  gap: 18px;

}

#latest-events .table-scroll { flex: 1 1 auto; }

#bot-status .badges { margin-bottom: 8px; }

#bot-status .tabs { margin-top: 6px; }

#bot-status .tabs + .status-list,
#bot-status .tabs + .list-clean { margin-top: 16px; }

.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); font-size: 12px; }

.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); }

.dot.ok { background: var(--success); }

.dot.warn { background: var(--warn); }

.dot.err { background: var(--danger); }

.status-list, .list-clean { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }

.status-list b { color: var(--text); font-weight: 600; }

.list-clean li::marker { content: none; }

.spacer-xs { height: 6px; }

.spacer-sm { height: 12px; }

.spacer-md { height: 18px; }

/* Tabs */

.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); }

.tab {

  padding: 10px 16px;

  border: 1px solid var(--border);

  border-bottom: none;

  background: color-mix(in lab, var(--panel-2) 90%, transparent);

  border-radius: 12px 12px 0 0;

  cursor: pointer;

  font-weight: 600;

  font-size: 13px;

  letter-spacing: .2px;

  color: var(--muted);

  transition: background .2s ease, color .2s ease, border-color .2s ease;

}

.tab:hover { color: var(--text); border-color: rgba(var(--accent-1), .3); }

.tab.active { background: linear-gradient(135deg, rgba(var(--accent-1), .25), rgba(var(--accent-2), .18)); color: var(--text); border-color: rgba(var(--accent-1), .4); }

/* Modal */

dialog.modal { width: min(720px, 96vw); border: 1px solid var(--border); border-radius: 14px; padding: 0; background: linear-gradient(180deg, var(--panel), var(--panel-2)); color: var(--text); position: fixed; inset: 0; margin: auto; z-index: 100; opacity: 0; visibility: hidden; pointer-events: none; }

dialog.modal[open] { opacity: 1; visibility: visible; pointer-events: auto; }

dialog::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px); }

#modal-admin { width: min(960px, 96vw); max-height: 92vh; display: flex; flex-direction: column; margin: auto; }

#modal-admin > main { flex: 1; overflow: auto; padding-bottom: 6px; }

#modal-admin .admin-main { display: grid; gap: 18px; min-height: 0; }

.modal header { padding: 16px 18px; border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }

.modal main { padding: 18px; }

.modal footer { padding: 16px 18px; border-top: 1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* Toast */

.toast {

  position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 50;

}

.toast .item { background: var(--panel-2); border:1px solid var(--border); box-shadow: var(--shadow); border-radius: 12px; padding: 12px 14px; }

/* Badges row */

.badges { display: flex; gap: 8px; flex-wrap: wrap; }

.badge-pill { padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); font-size: 12px; }

/* Variantes de color para chips de estado */

.pill-ok   { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.28);  color: #cdeed8; }

.pill-warn { background: rgba(255,176,32,.12); border-color: rgba(255,176,32,.28); color: #ffe3b5; }

.pill-err  { background: rgba(255,93,93,.12);  border-color: rgba(255,93,93,.28);  color: #ffd1d1; }

/* Texto coloreado para métricas en lista */

.text-ok   { color: var(--success); }

.text-warn { color: var(--warn); }

.text-err  { color: var(--danger); }

/* --- Footer fijo en la barra lateral --- */

/* Botón de login con look del tema */

.btn.btn-login {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  height: 44px;

  border-radius: 10px;

  font-weight: 600;

  text-decoration: none;

  transition: transform .08s ease, opacity .2s ease;

  /* colores oscuros por defecto; ajusta a tu palette si ya tienes vars */

  background: rgba(88, 101, 242, 0.14);          /* tono “Discord” suave */

  color: #cfd3ff;

  border: 1px solid rgba(88,101,242,0.35);

  backdrop-filter: blur(4px);

}

.btn.btn-login:hover { transform: translateY(-1px); opacity: .95; }

.btn.btn-login:active { transform: translateY(0); opacity: .9; }

.btn.btn-login .icon {

  width: 18px; height: 18px; fill: currentColor;

}

.btn.btn-login.connected {

  pointer-events: none;

  opacity: .6;

}

/* Pill de usuario conectado */

.user-pill {

  position: relative;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: flex-start;

  gap: 12px;

  padding: 12px 18px;

  margin: 0 auto;

  border-radius: 14px;

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow: 0 10px 22px rgba(0,0,0,.25);

  color: #cdd6f4;

  font-size: 13px;

  width: 100%;

  max-width: 280px;

}

.user-pill .user-avatar { width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,0.18); object-fit:cover; flex-shrink:0; }

.user-pill .info { display:flex; flex-direction:column; gap:4px; min-width:0; }

.user-pill .user-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.user-pill .user-role { font-size:12px; color:rgba(205,214,244,0.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.user-pill .dot { position:absolute; top:10px; right:10px; width:10px; height:10px; border-radius:999px; }

.user-pill .dot.online { background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,0.18); }

/* Menú del usuario */

.user-menu { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); padding:10px; display:none; min-width: 200px; z-index: 20; }

.user-menu a { display:block; padding:8px 12px; color: var(--text); text-decoration:none; border-radius:8px; text-align: center; }

.user-menu a:hover { background: rgba(var(--accent-1), .12); }

.user-menu .menu-connect { border:1px solid rgba(var(--accent-1), .3); background: rgba(var(--accent-1), .12); font-weight: 600; margin:4px 0; }

.user-menu .menu-connect.connected { cursor: default; opacity: .6; border-color: rgba(var(--accent-1), .18); background: rgba(var(--accent-1), .08); }

/* Theme chooser */

.theme-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }

.theme-card { border:1px solid var(--border); border-radius:12px; background: var(--panel-2); padding:12px; cursor:pointer; display:grid; gap:8px; }

.theme-card:hover { outline: 2px solid rgba(var(--accent-1), .25); }

.theme-card.active { outline: 2px solid rgba(var(--accent-1), .5); }

.theme-row { display:flex; align-items:center; justify-content:space-between; }

.swatches { display:flex; gap:6px; }

.swatch { width:16px; height:16px; border-radius:4px; border:1px solid var(--border); }

.swatch.light-1 { background:#ffffff; }

.swatch.light-2 { background:#f6f8fb; }

.swatch.light-3 { background:#e8eef5; }

.swatch.dark-1 { background:#0b0d12; }

.swatch.dark-2 { background:#121723; }

.swatch.dark-3 { background:#1d2330; }

.swatch.fire-1 { background:#1a1010; }

.swatch.fire-2 { background:#2a1612; }

.swatch.fire-3 { background:#ff6b00; }

/* Responsive: no tape el contenido en mobile */

@media (max-height: 680px) {

}

@media (max-width: 980px) {

  .btn.btn-login { height: 42px; }

}

#post-login-card[hidden] { display:none !important; }

#btn-login[hidden] { display:none !important; }

.like-card { background: var(--surface-2); border-radius:12px; padding:16px; }

.value.big, .value { font-weight:700; font-size:28px; }

.admin-main { display: grid; gap: 18px; }

.admin-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }

.admin-tab { padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); cursor: pointer; font-weight: 600; color: var(--text); }

.admin-tab.active { background: linear-gradient(135deg, rgba(var(--accent-1), .2), rgba(var(--accent-2), .16)); border-color: transparent; }

.admin-section { display: grid; gap: 16px; }

.admin-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.admin-form { display: grid; gap: 14px; }

.admin-form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.admin-field { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }

.admin-field input, .admin-field select { padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }

.admin-field-inline { display: flex; gap: 8px; align-items: center; }

.admin-field-inline 

.admin-form-actions { display: flex; align-items: center; gap: 12px; }

.admin-help { color: var(--muted); font-size: 13px; margin: 0; }

.admin-users-table { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }

.admin-users-table .empty-row { text-align: center; color: var(--muted); font-size: 13px; padding: 18px 12px; }

.admin-users-table table { width: 100%; }

.admin-users-table td.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.admin-users-table select { width: 100%; padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }

.admin-role-create { display: grid; gap: 10px; margin-bottom: 12px; }

.admin-role-create-inline { display: flex; gap: 8px; align-items: center; }

.admin-role-create-inline input { flex: 1; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }

.admin-role-create-inline 

.admin-roles-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.admin-role-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--panel-2); display: grid; gap: 12px; }

.admin-role-card h4 { margin: 0; font-size: 16px; }

.admin-role-perms { display: grid; gap: 8px; }

.admin-role-perms label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

.admin-role-actions { display: flex; gap: 8px; }

.admin-role-actions 

.admin-code { display:flex; align-items:center; gap:8px; }

.admin-code 

.admin-user-name { font-weight:600; }

.admin-user-sub { color: var(--muted); font-size:12px; }

.admin-ranks-layout { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }

.admin-ranks-actions { flex-wrap: wrap; align-items: center; justify-content: space-between; }

.admin-ranks-actions .admin-help { margin: 0; flex: 1 1 auto; }

.admin-ranks-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.admin-ranks-table { max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }

.admin-ranks-table table { width: 100%; border-collapse: collapse; }

.admin-ranks-table .empty-row { text-align: center; color: var(--muted); font-size: 13px; padding: 18px 12px; }

/* ===== LOGIN PAGE (movido desde login.html) ===== */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(9, 10, 20, 1) 0%, rgba(18, 20, 30, 1) 100%);
  color: #e6eef8;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

body.login-page .login-card {
  width: 380px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 28px;
  border-radius: 14px;
  box-shadow: var(--shadow, 0 8px 24px rgba(2, 6, 23, 0.6));
  backdrop-filter: blur(6px);
}

body.login-page .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

body.login-page .logo {
  width: 64px;
  height: 64px;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
  padding: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  animation: float 3s ease-in-out infinite;
}
body.login-page .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-6px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

body.login-page .title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
}
body.login-page .subtitle {
  font-size: 12px;
  color: rgba(230, 238, 248, 0.7);
  margin-top: 4px;
}
body.login-page .form-group { margin-top: 12px; }
body.login-page label {
  font-size: 13px;
  display: block;
  margin-bottom: 6px;
  color: rgba(230, 238, 248, 0.85);
}

body.login-page input[type="text"],
body.login-page input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0,0,0,0.35);
  color: #e6eef8;
  outline: none;
  box-sizing: border-box;
  transition: box-shadow .15s, border-color .15s;
}
body.login-page input:focus {
  border-color: rgba(130, 180, 255, 0.9);
  box-shadow: 0 4px 14px rgba(60,120,255,0.08);
}

body.login-page .btn {
  margin-top: 14px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, #2f9cff, #5b6bff);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

body.login-page .note { margin-top: 12px; font-size: 13px; color: rgba(230,238,248,0.7); }
body.login-page .error { color: #ffb4b4; margin-top: 8px; font-size: 13px; }
body.login-page .small { font-size: 12px; color: rgba(230, 238, 248, 0.6); }

/* Botón oculto de impersonate (compacto) */
#impersonateBtn {
  display: none;
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px dashed rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.2);
  color: #e6eef8;
  cursor: pointer;
  width: auto;
  max-width: 160px;
  text-align: center;
}

.user-pill.open .user-menu { display:block; }