/* ═══════════════════════════════════════════════════════
   LOGODEMOCRACY — base-layout.css
   Estilos compartidos por todos los módulos y la landing.
   ═══════════════════════════════════════════════════════ */

body {
  margin: 0;
  font-family: monospace;
  background: #050a12;
  color: #e5e7eb;
}

:root {
  --accent: #22c55e;

  /* color por defecto = landing */
  --header-color: #e5e7eb;

  /* borde neutro */
  --header-border: rgba(229,231,235,.12);
}

/* ─── PAGE SHELL ─────────────────────────────────────── */
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ─── SIDEBAR ────────────────────────────────────────── */
.sidebar {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  display: flex;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: .25s;
}

.sidebar-content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.sidebar-rail {
  width: 22px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.sidebar-toggle {
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--accent);
}

.sidebar.collapsed {
  width: 22px;
  min-width: 22px;
  max-width: 22px;
}

.sidebar.collapsed .sidebar-content {
  display: none;
}

.tree,
.epistemic,
.philosopher {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: #050a12;
}

.tree {
  flex: 1;
  overflow: auto;
}

.epistemic-title {
  color: var(--accent);
  margin-bottom: 8px;
}

/* ─── DOCUMENT AREA ──────────────────────────────────── */
.document {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.document-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--accent);
}

.document-content {
  flex: 1;
  overflow: auto;
  padding: 24px;
}

/* ─── FOOTER ─────────────────────────────────────────── */
.footer {
  padding: 12px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════
   TOPBAR — compartido entre landing y todos los módulos
   ═══════════════════════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 16px;
  height: 56px;

  box-sizing: border-box;
  border-bottom: 1px solid var(--header-border);

  background: #050a12;
  font-family: var(--f-mono);

  position: relative;
  z-index: 1000;

  flex-wrap: nowrap; /* 🔥 CLAVE */
}

/* LOGO */
.brand{

  text-decoration: none !important;
  color: var(--header-color) !important;

    font-family:"IBM Plex Mono", monospace;

    font-size:1rem;

    font-weight:600;

    letter-spacing:1px;

    transition:.2s;
}

/* NAV CENTRAL */
.module-nav {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* LINKS DE MÓDULOS */
.module-link {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  text-decoration: none;

  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 2px;

  transition: all 200ms ease;
  display: inline-flex;
  align-items: center;
}

.module-link:hover {

  border-color: var(--accent);

  color: var(--accent);

}


.module-link.active {

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

  color: var(--accent);

  background: rgba(255,255,255,.03);

}

/* LADO DERECHO */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-menu {
  text-decoration: none;
  color: #e5e7eb;
  opacity: 0.8;
  font-size: 13px;
}

.user-menu:hover {
  opacity: 1;
  color: var(--accent);
}

.lang {
  font-size: 13px;
  opacity: 0.8;
}

.auth-btn {
  text-decoration: none;
  font-size: 13px;
  color: #e5e7eb;
  opacity: 0.8;
  padding: 4px 8px;
  border: 1px solid transparent;
  transition: 0.2s;
  cursor: pointer;
  background: none;
}

.auth-btn:hover {
  opacity: 1;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

/* BOTÓN HAMBURGUESA */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--header-color);
  padding: 4px;
  cursor: pointer;
}

.mobile-menu-btn svg {
  display: block;
}


/* ───────────────── RESPONSIVE ───────────────── */

@media (max-width:900px){

  .mobile-menu-btn{
      display:flex;
      align-items:center;
      justify-content:center;
  }

  .topbar{
      position:relative;
      z-index:1000;
  }

  .module-nav{
      display:none;
  }

  .topbar-right{
      display:none;
  }

  .topbar-right.open{

      display:flex;

      flex-direction:row;

      align-items:center;

      justify-content:flex-start;

      gap:16px;

      position:absolute;

      top:56px;

      left:0;
      right:0;

      padding:16px;

      background:#050a12;

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

      z-index:1000;

  }

  .module-nav.open{

      display:flex;

      flex-direction:column;

      gap:14px;

      position:absolute;

      left:0;
      right:0;

      top:108px;

      padding:16px;

      background:#050a12;

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

      z-index:999;

  }

}