/* ============================================
   TOKENS
   ============================================ */
:root {
  /* Paleta basada en carlosramirezmg.net */
  --bg-void:     #0a0d12;
  --bg-panel:    #0f1318;
  --bg-raised:   #1a2030;
  --border:      rgba(100, 160, 255, 0.25);
  --border-soft: rgba(100, 160, 255, 0.12);

  --fg-primary:  #e8edf5;
  --fg-secondary:#b8c3d6;
  --fg-muted:    #8a9bb5;
  --fg-faint:    #4a5a70;

  /* Nombres heredados del tema anterior; los valores son la nueva paleta:
     orange→azul primario, aqua→teal, blue→azul claro (links), yellow→naranja */
  --accent-orange: #3d7fff;
  --accent-aqua:   #00d4aa;
  --accent-blue:   #5b9aff;
  --accent-yellow: #ff6b35;

  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Syne', sans-serif;

  --radius: 2px;
}

* { box-sizing: border-box; }

/* FIX CRÍTICO: el atributo hidden de HTML debe ganar siempre, aunque el
   elemento tenga display:flex/grid en su clase. Sin esto, elementos como
   el link de administración se mostraban a usuarios no-admin. */
[hidden] { display: none !important; }

/* Retícula de fondo, como en el portafolio */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(61,127,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,127,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

body {
  margin: 0;
  background: var(--bg-void);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: 14px;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input { font-family: inherit; }

/* ============================================
   CURSOR BLINK (signature detail)
   ============================================ */
.cursor-blink {
  display: inline-block;
  color: var(--accent-orange);
  font-family: var(--font-mono);
  animation: blink 1.1s step-end infinite;
  margin-left: 2px;
}
@keyframes blink {
  0%, 45%   { opacity: 1; }
  50%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-blink { animation: none; opacity: 1; }
}

/* ============================================
   TOPBAR
   ============================================ */
.topbar {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.prompt-brand {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.prompt-user   { color: var(--accent-aqua); }
.prompt-at     { color: var(--fg-muted); }
.prompt-host   { color: var(--accent-blue); }
.prompt-colon  { color: var(--fg-muted); }
.prompt-path   { color: var(--fg-secondary); margin-left: 2px; }

.topbar-search {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 6px 10px;
  color: var(--fg-muted);
}
.topbar-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg-primary);
  font-size: 13px;
  width: 100%;
}
.topbar-search input::placeholder { color: var(--fg-faint); }

.topbar-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.save-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
}
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.dot-saved { background: var(--accent-aqua); }

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.username { font-size: 13px; color: var(--fg-secondary); }

/* ============================================
   APP SHELL
   ============================================ */
.app-shell {
  display: flex;
  height: calc(100vh - 46px);
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  overflow-y: auto;
}

.sidebar-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--fg-faint);
  padding: 0 8px 8px;
}

.space-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius);
  color: var(--fg-secondary);
  font-size: 13px;
  cursor: pointer;
}
.space-item svg { color: var(--fg-muted); flex-shrink: 0; }
.space-item:hover { background: var(--bg-raised); }
.space-active {
  background: var(--bg-raised);
  color: var(--fg-primary);
  border-left: 2px solid var(--accent-orange);
  padding-left: 6px;
}
.space-active svg { color: var(--accent-orange); }

.role-pill {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: lowercase;
  letter-spacing: 0.03em;
}
.role-owner  { background: rgba(61,127,255,0.15); color: var(--accent-orange); }
.role-editor { background: rgba(0,212,170,0.15); color: var(--accent-aqua); }
.role-viewer { background: rgba(91,154,255,0.15); color: var(--accent-blue); }

.btn-ghost {
  background: none;
  border: 1px dashed var(--border);
  color: var(--fg-muted);
  font-size: 12px;
  padding: 7px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  margin-top: 4px;
}
.btn-ghost:hover {
  border-color: var(--fg-muted);
  color: var(--fg-secondary);
}

.sidebar-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 16px 4px;
}

.sidebar-tree { flex: 1; }

.tree-node {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--fg-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
}
.tree-node:hover { background: var(--bg-raised); }
.tree-folder { color: var(--fg-muted); font-weight: 500; }
.tree-caret { font-size: 10px; color: var(--fg-faint); }
.tree-file { padding-left: 22px; color: var(--fg-secondary); }
.tree-bullet { color: var(--fg-faint); }
.tree-active {
  background: var(--bg-raised);
  color: var(--accent-yellow);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
}
.admin-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-faint);
  text-decoration: none;
  padding: 8px;
}
.admin-link:hover { color: var(--fg-muted); }

/* ============================================
   EDITOR AREA
   ============================================ */
.editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-pathbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border-bottom: 1px solid var(--border-soft);
}
.path-dim { color: var(--fg-faint); }
.path-bright { color: var(--fg-secondary); }
.editor-pathbar .role-pill { margin-left: auto; }

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--border-soft);
}
.tb-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--fg-muted);
  width: 28px; height: 28px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.tb-btn:hover {
  background: var(--bg-raised);
  color: var(--fg-primary);
  border-color: var(--border);
}
.tb-sep {
  width: 1px; height: 18px;
  background: var(--border-soft);
  margin: 0 6px;
}
.tb-btn-preview {
  width: auto;
  padding: 0 12px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.editor-surface {
  flex: 1;
  overflow-y: auto;
  padding: 32px 48px 80px;
  width: 100%;
}

/* En vista previa (lectura), una línea demasiado larga cansa la vista;
   se limita solo el ancho del texto renderizado, no del editor */
.content-panes:not(.split) .note-preview {
  max-width: 860px;
}

.note-title {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 0 0 20px;
  outline: none;
}

.editor-surface p {
  line-height: 1.7;
  color: var(--fg-secondary);
  font-size: 14.5px;
}
.editor-surface strong { color: var(--fg-primary); }
.editor-surface code {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-yellow);
}
.editor-surface h2 {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent-aqua);
  text-transform: lowercase;
  letter-spacing: 0.03em;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.editor-surface ul {
  color: var(--fg-secondary);
  line-height: 1.8;
  padding-left: 20px;
}
.editor-surface pre {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--accent-orange);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
}
.editor-surface pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--fg-secondary);
  font-size: 12.5px;
  line-height: 1.6;
}

.note-image-block {
  margin: 20px 0;
}
.note-image-placeholder {
  background: var(--bg-raised);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--fg-faint);
}
.note-image-placeholder span {
  font-family: var(--font-mono);
  font-size: 12px;
}
.note-image-caption {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-faint);
  margin-top: 6px;
  text-align: center;
}

.drive-link-note {
  font-size: 13px;
  color: var(--fg-muted);
}
.drive-link-note code {
  font-size: 12px;
}
.drive-link-note a {
  color: var(--accent-blue);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-blue);
}

.editor-statusbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
}
.statusbar-sep { color: var(--border); }
.autosave-tag { color: var(--accent-aqua); margin-left: auto; }

/* ============================================
   RESPONSIVE
   ============================================ */
/* Botón hamburguesa: oculto en escritorio */
.hamburger { display: none; font-size: 17px; }

@media (max-width: 860px) {
  .hamburger { display: flex; }

  /* Sidebar deslizable: oculto por defecto, se muestra con .sidebar-open */
  .sidebar {
    position: fixed;
    left: 0;
    top: 46px;
    z-index: 30;
    height: calc(100vh - 46px);
    width: min(300px, 84vw);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    position: fixed;
    inset: 46px 0 0 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 25;
  }

  /* En móvil solo editor y vista: la dividida no tiene sentido en pantalla angosta */
  .mode-btn[data-mode="split"] { display: none; }

  /* Compactar topbar */
  .username { display: none; }
  .save-indicator { display: none; }
  .prompt-brand { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

  .editor-surface { padding: 20px 16px 60px; }
  .editor-pathbar { padding: 10px 14px; overflow: hidden; }
  .editor-toolbar { padding: 8px 10px; flex-wrap: wrap; gap: 2px; }
  .note-title { font-size: 22px; }
}

/* Dispositivos táctiles: los controles que en escritorio aparecen con hover
   deben estar siempre visibles (no existe hover en touch) */
@media (hover: none) {
  .space-delete,
  .space-rename,
  .tree-add-child,
  .tree-menu-btn { opacity: 1 !important; }
}

/* ============================================
   ACCESSIBILITY: focus states
   ============================================ */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[contenteditable]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 2px;
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.login-card {
  width: min(380px, calc(100vw - 40px));
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.login-prompt {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}
.login-cmd { color: var(--accent-yellow); }
.login-sub {
  color: var(--fg-muted);
  font-size: 13px;
  margin: 0 0 22px;
}
.login-error {
  background: rgba(61, 127, 255, 0.1);
  border: 1px solid var(--accent-orange);
  border-radius: var(--radius);
  color: var(--accent-orange);
  font-size: 12.5px;
  padding: 9px 12px;
  margin-bottom: 16px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.06em;
  margin-top: 8px;
}
.login-input {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--fg-primary);
  font-size: 14px;
  padding: 9px 11px;
}
.login-input:focus {
  border-color: var(--accent-orange);
  outline: none;
}
.login-btn {
  margin-top: 18px;
  background: var(--accent-orange);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
}
.login-btn:hover { filter: brightness(1.1); }
.login-btn:disabled { opacity: 0.6; cursor: wait; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--fg-faint);
  font-size: 11px;
  font-family: var(--font-mono);
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.login-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-secondary);
  font-size: 13px;
  padding: 10px;
  text-decoration: none;
}
.login-google:hover {
  border-color: var(--fg-muted);
  color: var(--fg-primary);
}

/* ============================================
   EDITOR: textarea + preview + estado vacío
   ============================================ */
.note-editor {
  width: 100%;
  min-height: 60vh;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.75;
}
.note-editor::placeholder { color: var(--fg-faint); }
.note-editor:read-only { color: var(--fg-muted); }

.note-preview {
  line-height: 1.7;
  color: var(--fg-secondary);
  font-size: 14.5px;
}
.note-preview h1, .note-preview h2, .note-preview h3 {
  font-family: var(--font-mono);
  color: var(--accent-aqua);
}
.note-preview h1 { font-size: 20px; }
.note-preview h2 {
  font-size: 15px;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.note-preview strong { color: var(--fg-primary); }
.note-preview code {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-yellow);
}
.note-preview pre {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--accent-orange);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
}
.note-preview pre code {
  background: none; border: none; padding: 0;
  color: var(--fg-secondary); font-size: 12.5px; line-height: 1.6;
}
.note-preview img {
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  margin: 8px 0;
}
.note-preview a {
  color: var(--accent-blue);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-blue);
}
.note-preview blockquote {
  margin: 12px 0;
  padding: 4px 16px;
  border-left: 2px solid var(--accent-aqua);
  color: var(--fg-muted);
}
.note-preview ul, .note-preview ol {
  line-height: 1.8;
  padding-left: 20px;
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
}
.empty-prompt {
  font-family: var(--font-mono);
  font-size: 15px;
}
.empty-cmd { color: var(--accent-yellow); }
.empty-arg { color: var(--fg-faint); }
.empty-state p {
  color: var(--fg-muted);
  font-size: 13.5px;
  max-width: 340px;
  text-align: center;
}

/* ============================================
   ELEMENTOS DINÁMICOS: árbol, botones extra
   ============================================ */
/* FIX scroll: el wrapper del editor debe ser columna flex con altura acotada
   para que .editor-surface pueda hacer scroll interno */
#editor-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.editor-surface { min-height: 0; }

/* Vista dividida: editor y preview lado a lado, con divisor ajustable */
.content-panes.split {
  display: grid;
  grid-template-columns: 1fr 6px 1fr;
  align-items: start;
}
#split-gutter {
  display: none;
  width: 6px;
  align-self: stretch;
  cursor: col-resize;
  background: transparent;
  border-left: 1px solid var(--border-soft);
  transition: border-color 0.15s;
}
.content-panes.split #split-gutter { display: block; }
#split-gutter:hover, #split-gutter.dragging {
  border-left: 2px solid var(--accent-orange);
}
.content-panes.split .note-preview {
  padding-left: 22px;
  min-width: 0;
}
.content-panes.split .note-editor { min-width: 0; }
@media (max-width: 900px) {
  .content-panes.split {
    grid-template-columns: 1fr !important;
  }
  .content-panes.split #split-gutter { display: none; }
  .content-panes.split .note-preview {
    padding-left: 0;
    border-top: 1px solid var(--border-soft);
    padding-top: 20px;
  }
}

/* Botones de modo del editor (Editor | Dividida | Vista) */
.mode-group {
  display: flex;
  gap: 2px;
  margin-left: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 2px;
}
.mode-btn {
  background: none;
  border: none;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 2px;
  cursor: pointer;
}
.mode-btn:hover { color: var(--fg-primary); }
.mode-btn.mode-active {
  background: var(--bg-raised);
  color: var(--accent-orange);
}

/* Hint mínimo cuando no hay nota abierta (reemplaza al estado vacío grande) */
.main-hint {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: center;
  padding: 0 24px;
}

/* Acciones de espacio en el sidebar (renombrar/borrar) */
.space-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.space-rename {
  background: none;
  border: none;
  color: var(--fg-faint);
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0;
  flex-shrink: 0;
}
.space-item:hover .space-rename { opacity: 1; }
.space-rename:hover { color: var(--accent-aqua); }
.space-delete {
  background: none;
  border: none;
  color: var(--fg-faint);
  font-size: 12px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0;
  flex-shrink: 0;
}
.space-item:hover .space-delete { opacity: 1; }
.space-delete:hover { color: var(--accent-orange); }
.space-rename-input {
  background: var(--bg-raised);
  border: 1px solid var(--accent-orange);
  border-radius: 2px;
  color: var(--fg-primary);
  font-size: 13px;
  padding: 2px 6px;
  width: 100%;
  min-width: 0;
}

/* Modal de perfil */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-card {
  width: min(400px, calc(100vw - 40px));
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.modal-title {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent-aqua);
  margin: 0 0 18px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.modal-actions .login-btn { flex: 1; margin-top: 0; }
.btn-secondary {
  flex: 1;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--fg-muted); color: var(--fg-primary); }
.user-chip { cursor: pointer; border-radius: var(--radius); padding: 3px 6px; }
.user-chip:hover { background: var(--bg-raised); }

.tree-rename-input {
  background: var(--bg-raised);
  border: 1px solid var(--accent-orange);
  border-radius: 2px;
  color: var(--fg-primary);
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 2px 6px;
  width: 100%;
  min-width: 0;
}

.tree-empty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  padding: 8px;
}
.tree-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.tree-add-child {
  background: none;
  border: none;
  color: var(--fg-faint);
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0;
  flex-shrink: 0;
}
.tree-node:hover .tree-add-child { opacity: 1; }
.tree-add-child:hover { color: var(--accent-aqua); }

.logout-btn { font-size: 15px; }
.doc-delete {
  margin-left: auto;
  font-size: 13px;
}
.doc-delete:hover { color: var(--accent-orange); }
.editor-pathbar .role-pill { margin-left: 8px; }

/* ============================================
   PANEL DE ADMINISTRACIÓN
   ============================================ */
.admin-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  height: calc(100vh - 46px);
  overflow-y: auto;
}
.admin-back {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-muted);
  text-decoration: none;
}
.admin-back:hover { color: var(--fg-primary); }
.admin-section {
  margin-bottom: 48px;
}
.admin-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-aqua);
  text-transform: lowercase;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.admin-sub {
  color: var(--fg-muted);
  font-size: 13px;
  margin: 0 0 18px;
}
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-panel);
}
.admin-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg-secondary);
}
.admin-table tr:last-child td { border-bottom: none; }
.cell-email { font-family: var(--font-mono); font-size: 12.5px; }
.cell-actions { display: flex; gap: 8px; }

.pill-ok, .pill-pending, .pill-admin, .pill-pending-inline {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 2px;
}
.pill-ok      { background: rgba(0,212,170,0.15); color: var(--accent-aqua); }
.pill-pending, .pill-pending-inline { background: rgba(255,107,53,0.15); color: var(--accent-yellow); }
.pill-admin   { background: rgba(61,127,255,0.15); color: var(--accent-orange); }

.admin-btn {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}
.admin-btn:hover { border-color: var(--fg-muted); color: var(--fg-primary); }
.admin-btn-danger:hover { border-color: var(--accent-orange); color: var(--accent-orange); }

.admin-create { margin-top: 16px; }
.admin-create summary {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 6px 0;
}
.admin-create summary:hover { color: var(--fg-primary); }
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  margin-top: 12px;
}
.admin-form-row {
  flex-direction: row;
  flex-wrap: wrap;
  max-width: none;
  align-items: center;
  margin-top: 16px;
}
.admin-form-row .login-input { flex: 1; min-width: 200px; }
.admin-form-row .login-btn { margin-top: 0; }
.admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-secondary);
}
.admin-select {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--fg-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 11px;
  margin-bottom: 16px;
  min-width: 260px;
}
.admin-select-inline {
  margin-bottom: 0;
  min-width: 100px;
  padding: 4px 8px;
  font-size: 12px;
}
.admin-input-inline {
  padding: 5px 8px;
  font-size: 12.5px;
  width: 100%;
  min-width: 120px;
}


/* ============================================
   MENÚ CONTEXTUAL DE NOTAS (⋯)
   ============================================ */
.tree-menu-btn {
  background: none;
  border: none;
  color: var(--fg-faint);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0;
  flex-shrink: 0;
  line-height: 1;
}
.tree-node:hover .tree-menu-btn { opacity: 1; }
.tree-menu-btn:hover { color: var(--fg-primary); }

.note-menu {
  position: fixed;
  z-index: 50;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  min-width: 190px;
  padding: 4px;
  max-height: 60vh;
  overflow-y: auto;
}
.note-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-menu-item:hover { background: var(--bg-panel); color: var(--fg-primary); }
.note-menu-item.danger:hover { color: var(--accent-orange); }
.note-menu-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  padding: 8px 12px 4px;
}
.note-menu-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 8px;
}


/* ============================================
   CARET DE ÁRBOL COLAPSABLE
   ============================================ */
.tree-caret-btn {
  background: none;
  border: none;
  color: var(--fg-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 6px;
  margin: -4px 0 -4px -6px;
  flex-shrink: 0;
  line-height: 1;
  border-radius: 2px;
}
.tree-caret-btn:hover {
  color: var(--accent-orange);
  background: var(--bg-panel);
}
@media (hover: none) {
  /* Área táctil más grande en el teléfono */
  .tree-caret-btn { padding: 8px 10px; margin: -8px 0 -8px -8px; font-size: 12px; }
}