/* ============================================================
   Flask Gmail — Admin Dashboard Design System
   Tema claro con sidebar oscuro y tarjetas de estadísticas
   de colores. Compatible 1:1 con las clases gw-* originales.
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Fondos */
  --bg-base:        #eef1f6;   /* lienzo gris-azulado */
  --bg-surface:     #ffffff;   /* tarjetas blancas */
  --bg-elevated:    #f7f9fc;   /* headers de tarjeta */
  --bg-overlay:     #fbfcfe;   /* inputs claros */
  --bg-sidebar:     #2a2e3a;   /* sidebar oscuro */
  --bg-sidebar-alt: #232631;
  --bg-topbar:      #ffffff;

  /* Bordes */
  --border:        #e3e7ee;
  --border-light:  #eef1f6;
  --border-strong: #cfd6e1;
  --border-sidebar: #353945;

  /* Texto */
  --text-primary:   #2c3142;
  --text-secondary: #5a6378;
  --text-muted:     #98a0b3;
  --text-inverse:   #ffffff;
  --text-sidebar:        #b8bdca;
  --text-sidebar-muted:  #7e8497;
  --text-sidebar-active: #ffffff;

  /* Acento principal — violeta */
  --accent:        #7c85f3;
  --accent-hover:  #5f6ae8;
  --accent-light:  rgba(124, 133, 243, 0.10);
  --accent-glow:   rgba(124, 133, 243, 0.20);

  /* Paleta admin (stat tiles & charts) */
  --tile-violet: #9b7fe0;
  --tile-blue:   #4ec1e8;
  --tile-coral:  #ef7e6b;
  --tile-amber:  #f3c25c;
  --tile-teal:   #4cc2a4;

  /* Semáforos */
  --success:    #2fa776;
  --success-bg: #e6f5ee;
  --warning:    #e08a2b;
  --warning-bg: #fcefdb;
  --danger:     #d9534f;
  --danger-bg:  #fce8e7;
  --info:       #3b8fd1;
  --info-bg:    #e4f1fb;

  /* Consola */
  --console-bg:   #1c1f2a;
  --console-text: #a8ff78;
  --console-font: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Tipografía */
  --font-base: 'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:   0.72rem;
  --text-sm:   0.825rem;
  --text-base: 0.9rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;

  --leading-tight:  1.3;
  --leading-normal: 1.55;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* Radios */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-pill: 999px;

  /* Sombras (suaves, propias de dashboards claros) */
  --shadow-sm: 0 1px 2px rgba(31, 41, 70, 0.05);
  --shadow-md: 0 2px 6px rgba(31, 41, 70, 0.07);
  --shadow-lg: 0 8px 24px rgba(31, 41, 70, 0.10);

  /* Layout */
  --sidebar-w:  220px;
  --topbar-h:   58px;

  /* Transiciones */
  --transition: 150ms ease;
}

/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar global ──────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Selección ────────────────────────────────────────────── */
::selection { background: var(--accent-light); color: var(--accent-hover); }

/* ============================================================
   LAYOUT — Sidebar + Topbar + Main
   ============================================================ */

.gw-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.gw-sidebar {
  grid-area: sidebar;
  background: var(--bg-sidebar);
  color: var(--text-sidebar);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.gw-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  height: var(--topbar-h);
  color: var(--text-sidebar-active);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.2px;
  border-bottom: 1px solid var(--border-sidebar);
  text-decoration: none;
}
.gw-sidebar-brand:hover { color: #fff; text-decoration: none; }
.gw-sidebar-brand-mark {
  width: 26px; height: 26px;
  border-radius: var(--radius-md);
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}

.gw-sidebar-section {
  padding: var(--space-4) var(--space-5) var(--space-2);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-sidebar-muted);
}

.gw-sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.gw-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--text-sidebar);
  font-size: var(--text-sm);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.gw-sidebar-link:hover {
  background: var(--bg-sidebar-alt);
  color: var(--text-sidebar-active);
  text-decoration: none;
}
.gw-sidebar-link.active {
  background: var(--bg-sidebar-alt);
  color: var(--text-sidebar-active);
  border-left-color: var(--accent);
}
.gw-sidebar-link .gw-sidebar-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}
.gw-sidebar-link .gw-sidebar-badge {
  margin-left: auto;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.gw-sidebar-footer {
  margin-top: auto;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-sidebar);
  font-size: var(--text-xs);
  color: var(--text-sidebar-muted);
}

/* ── Topbar (navbar) ───────────────────────────────────────── */
.gw-navbar,
.gw-topbar {
  grid-area: topbar;
  background: var(--bg-topbar) !important;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  height: var(--topbar-h);
  position: sticky;
  top: 0;
  z-index: 50;
}

.gw-brand {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.gw-brand:hover { color: var(--accent) !important; text-decoration: none; }

.gw-topbar-search {
  flex: 1;
  max-width: 360px;
  position: relative;
}
.gw-topbar-search input {
  width: 100%;
  height: 36px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 var(--space-3) 0 36px;
  color: var(--text-primary);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.gw-topbar-search input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.gw-topbar-search::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") center/contain no-repeat;
}

.gw-topbar-spacer { flex: 1; }

.gw-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.gw-topbar-icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.gw-topbar-icon-btn:hover { background: var(--bg-elevated); color: var(--accent); }

.gw-topbar-user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3) 4px 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
}
.gw-topbar-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
}

/* legacy nav-link compat (top bar pills) */
.gw-nav-link {
  color: var(--text-secondary) !important;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
}
.gw-nav-link:hover { color: var(--accent) !important; background: var(--accent-light); text-decoration: none; }
.gw-nav-link.active { color: var(--accent) !important; background: var(--accent-light); font-weight: 600; }

.gw-nav-logout {
  color: var(--text-muted) !important;
  font-size: var(--text-xs);
  text-decoration: none;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: color var(--transition), border-color var(--transition);
}
.gw-nav-logout:hover { color: var(--danger) !important; border-color: var(--danger); }

/* ── Main content area ─────────────────────────────────────── */
.gw-main {
  grid-area: main;
  padding: var(--space-5) var(--space-6);
  min-width: 0;
}

/* Crumbs / page header */
.gw-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.gw-page-title {
  color: var(--text-primary);
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.gw-crumbs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.gw-crumbs a { color: var(--text-secondary); }
.gw-crumbs a:hover { color: var(--accent); text-decoration: none; }
.gw-crumbs-sep { color: var(--border-strong); }
.gw-page-desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: var(--space-2) 0 var(--space-5);
  line-height: var(--leading-normal);
}

/* ============================================================
   COMPONENTES
   ============================================================ */

/* ── Stat tiles (KPIs en color) ────────────────────────────── */
.gw-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.gw-stat {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gw-stat-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
}
.gw-stat-label {
  margin-top: 6px;
  font-size: var(--text-sm);
  opacity: 0.85;
  letter-spacing: 0.3px;
  text-transform: lowercase;
}
.gw-stat-icon {
  position: absolute;
  right: 14px;
  bottom: 6px;
  width: 64px; height: 64px;
  opacity: 0.22;
}
.gw-stat-violet { background: var(--tile-violet); }
.gw-stat-blue   { background: var(--tile-blue); }
.gw-stat-coral  { background: var(--tile-coral); }
.gw-stat-amber  { background: var(--tile-amber); color: #fff; }
.gw-stat-teal   { background: var(--tile-teal); }

/* ── Cards (widgets) ───────────────────────────────────────── */
.gw-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.gw-card:hover { box-shadow: var(--shadow-md); }

.gw-card-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 46px;
}
.gw-card-title {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: 0.2px;
}
.gw-card-tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
}
.gw-card-tool {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  transition: background var(--transition), color var(--transition);
}
.gw-card-tool:hover { background: var(--bg-elevated); color: var(--text-secondary); }
.gw-card-tool.danger:hover { color: var(--danger); }

.gw-card-body { padding: var(--space-4) var(--space-5); }
.gw-card-body--tight { padding: var(--space-3) var(--space-4); }
.gw-card-body--flush { padding: 0; }

.gw-card-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform var(--transition),
              color var(--transition);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 2px 8px var(--accent-glow);
  color: #fff;
}

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.btn-success:hover:not(:disabled), .btn-success:focus {
  background: #258760;
  border-color: #258760;
  color: #fff;
}
.btn-success:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost {
  background: #fff;
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ghost-danger {
  background: #fff;
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.btn-ghost-danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-ghost-warning {
  background: #fff;
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.btn-ghost-warning:hover {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}

.btn-sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
.btn-lg { font-size: var(--text-base); padding: var(--space-3) var(--space-6); }
.btn-block { width: 100%; justify-content: center; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-label {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.form-control {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-control::placeholder { color: var(--text-muted); }

.form-control-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--info);
  background: var(--bg-overlay);
}

.form-hint {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  line-height: var(--leading-normal);
}
.form-hint code {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--info);
}

.form-error { color: var(--danger); font-size: var(--text-xs); margin-top: var(--space-1); }

.form-check { display: flex; align-items: center; gap: var(--space-2); }
.form-check-input { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; }
.form-check-label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-bottom: 0;
}

.form-group { margin-bottom: var(--space-4); }

/* ── Alertas flash ──────────────────────────────────────────── */
.gw-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.gw-alert-close {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  font-size: var(--text-base);
  padding: 0;
  line-height: 1;
}
.gw-alert-close:hover { opacity: 1; }

.gw-alert-success { background: var(--success-bg); border-color: rgba(47,167,118,0.25); color: #1f7a55; }
.gw-alert-danger  { background: var(--danger-bg);  border-color: rgba(217,83,79,0.25);   color: #a23b38; }
.gw-alert-warning { background: var(--warning-bg); border-color: rgba(224,138,43,0.25);  color: #a06320; }
.gw-alert-info    { background: var(--info-bg);    border-color: rgba(59,143,209,0.25);  color: #2c6ea0; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
}
.badge-accent  { background: var(--accent-light); color: var(--accent-hover); border-color: rgba(124,133,243,0.25); }
.badge-success { background: var(--success-bg); color: #1f7a55; border-color: rgba(47,167,118,0.25); }
.badge-warning { background: var(--warning-bg); color: #a06320; border-color: rgba(224,138,43,0.25); }
.badge-danger  { background: var(--danger-bg);  color: #a23b38; border-color: rgba(217,83,79,0.25); }
.badge-muted   { background: #eef1f6; color: var(--text-secondary); border-color: var(--border); }
.badge-dot     { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Consola de log ─────────────────────────────────────────── */
#log-box {
  background: var(--console-bg);
  color: var(--console-text);
  font-family: var(--console-font);
  font-size: var(--text-xs);
  line-height: 1.7;
  height: 460px;
  overflow-y: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid #14161e;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Tablas ─────────────────────────────────────────────────── */
.gw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.gw-table thead tr {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.gw-table thead th {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
  text-align: left;
}
.gw-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}
.gw-table tbody tr:last-child { border-bottom: none; }
.gw-table tbody tr:hover { background: var(--bg-elevated); }
.gw-table tbody td {
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  vertical-align: middle;
}
.gw-table .cell-muted { color: var(--text-muted); font-size: var(--text-xs); }
.gw-table .cell-code  {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--info);
}
.gw-table .cell-actions { white-space: nowrap; }

/* ── Listas con barra (ranking) ────────────────────────────── */
.gw-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gw-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
}
.gw-list li:last-child { border-bottom: none; }
.gw-list-name { color: var(--text-primary); }
.gw-list-val  { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gw-list-val.accent { color: var(--accent); font-weight: 600; }

/* ── Vista previa (link form) ───────────────────────────────── */
.gw-preview {
  background: var(--bg-overlay);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.gw-preview-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
  display: block;
}
.gw-preview code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--info);
  display: block;
  word-break: break-all;
}

/* ── Panel de login ─────────────────────────────────────────── */
.gw-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--bg-base);
}
.gw-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.gw-login-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: var(--space-5) var(--space-6);
  text-align: center;
}
.gw-login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-lg);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: var(--space-3);
}
.gw-login-title { color: var(--text-primary); font-size: var(--text-base); font-weight: 700; margin: 0; }
.gw-login-subtitle { color: var(--text-muted); font-size: var(--text-xs); margin: var(--space-1) 0 0; }
.gw-login-body { padding: var(--space-5) var(--space-6); }

/* ── Buscador (formulario, no topbar) ───────────────────────── */
.gw-search-group { display: flex; gap: var(--space-2); max-width: 440px; }
.gw-search-group .form-control { flex: 1; }

/* ── Grids ──────────────────────────────────────────────────── */
.gw-grid { display: grid; gap: var(--space-4); }
.gw-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gw-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gw-grid-dashboard { grid-template-columns: 1fr; }
@media (min-width: 992px) {
  .gw-grid-dashboard { grid-template-columns: 270px 1fr; }
}

.gw-btn-group { display: inline-flex; gap: var(--space-2); }

.gw-form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* ── Status pill ────────────────────────────────────────────── */
#status-badge-wrapper { text-align: center; padding: var(--space-4) 0; }
.gw-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid transparent;
}
.gw-status-idle    { background: var(--bg-elevated); border-color: var(--border); color: var(--text-secondary); }
.gw-status-running { background: var(--warning-bg);  border-color: rgba(224,138,43,0.3); color: #a06320; }
.gw-status-running .badge-dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ── Divisor ────────────────────────────────────────────────── */
.gw-divider { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; }

/* ── Footer ─────────────────────────────────────────────────── */
.gw-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-xs);
  padding: var(--space-5) 0 var(--space-4);
  margin-top: var(--space-8);
  border-top: 1px solid var(--border);
  letter-spacing: 0.3px;
}

/* ── Links ──────────────────────────────────────────────────── */
a { color: var(--accent-hover); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); text-decoration: underline; }
a.text-muted { color: var(--text-muted); }
a.text-muted:hover { color: var(--text-secondary); }
a.link-info { color: var(--info); font-size: var(--text-xs); }
a.link-info:hover { color: #2c6ea0; }

/* ── Código inline ──────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--info);
}

/* ── Texto auxiliar ─────────────────────────────────────────── */
.text-accent   { color: var(--accent); }
.text-success  { color: var(--success); }
.text-warning  { color: var(--warning); }
.text-danger   { color: var(--danger); }
.text-info     { color: var(--info); }
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-mono     { font-family: var(--font-mono); }
.text-xs       { font-size: var(--text-xs); }
.text-sm       { font-size: var(--text-sm); }
.fw-semibold   { font-weight: 600; }
.fw-bold       { font-weight: 700; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --sidebar-w: 64px; }
  .gw-sidebar-brand span,
  .gw-sidebar-link span:not(.gw-sidebar-badge),
  .gw-sidebar-section,
  .gw-sidebar-footer { display: none; }
  .gw-sidebar-brand { justify-content: center; padding: 0; }
  .gw-sidebar-link { justify-content: center; padding: var(--space-3); }
  .gw-main { padding: var(--space-4); }
}