/* /assets/app.css */

/* =========================
   THEME VARS (Simplenote-ish)
========================= */
body[data-theme="dark"]{
  --bg:#0b0d10;
  --panel:#0f141b;
  --panel2:#0b1016;
  --text:#e9eef5;
  --muted:#9aa6b2;
  --line:#1d2430;
  --accent:#4da3ff;
  --danger:#ff5c5c;

  --radius:12px;

  --btn-bg:transparent;
  --btn-hover:rgba(255,255,255,.06);
  --btn-active:rgba(77,163,255,.14);

  --input-bg:rgba(255,255,255,.03);
  --input-border:rgba(255,255,255,.08);
  --focus-border:rgba(77,163,255,.55);

  --row-hover:rgba(255,255,255,.04);
  --row-active:rgba(77,163,255,.12);
}

body[data-theme="light"]{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:#e5e7eb;
  --accent:#2563eb;
  --danger:#dc2626;

  --radius:12px;

  --btn-bg:transparent;
  --btn-hover:rgba(2,6,23,.06);
  --btn-active:rgba(37,99,235,.14);

  --input-bg:#ffffff;
  --input-border:#d1d5db;
  --focus-border:#2563eb;

  --row-hover:rgba(2,6,23,.04);
  --row-active:rgba(37,99,235,.10);
}

/* =========================
   BASE
========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

/* =========================
   LAYOUT
========================= */
.app{
  height:100vh;
  display:grid;
  grid-template-columns: 360px 1fr;
  min-height:0;
}

.sidebar,
.editor{
  min-height:0;
}

/* =========================
   SIDEBAR
========================= */
.sidebar{
  background: var(--panel);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.topbar{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);   /* ✅ línea separadora como Simplenote */
}

.brand{
  font-weight:700;
  letter-spacing:.2px;
  font-size:16px;
}

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

.actions button{
  width:34px; height:34px;
  border:1px solid transparent;
  background:var(--btn-bg);
  color:var(--text);
  border-radius:10px;
  cursor:pointer;
}
.actions button:hover{
  background:var(--btn-hover);
  border-color:var(--line);
}
.actions button:active{
  background:var(--btn-active);
}

.link{
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  font-weight:600;
}
.link:hover{ color:var(--text); }

.search, .filters{
  padding:12px 14px;
  border-bottom:1px solid var(--line);  /* ✅ separación de bloques */
}

.search input, .filters select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--text);
  outline:none;
  font-family:inherit;
}
.search input::placeholder{ color:color-mix(in srgb, var(--muted) 80%, transparent); }
.search input:focus, .filters select:focus{
  border-color:var(--focus-border);
}

/* ✅ Solo scrollea la lista */
.note-list{
  overflow:auto;
  flex:1;
  min-height:0;
}

/* =========================
   NOTE LIST (rows + separators)
   Más parecido a Simplenote
========================= */
.note-item{
  padding:12px 14px;
  cursor:pointer;
  border-bottom:1px solid var(--line);
  background:transparent;
  transition: background .12s ease;
}

.note-item:hover{ background:var(--row-hover); }
.note-item.active{ background:var(--row-active); }

.note-title{
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:600;
  line-height:1.2;
}

.pin{ opacity:.9; }

.note-meta{ margin-top:6px; }
.snippet{
  color:var(--muted);
  font-size:13px;
  line-height:1.3;
}

.note-tags{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  opacity:.9;
}

/* Elimina “bloques vacíos” feos */
.empty{
  color:var(--muted);
  padding:18px 14px;
}

/* =========================
   EDITOR
========================= */
.editor{
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--panel2);
}

/* ✅ topbar del editor con separador */
.editor-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}

.ghost{
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
  font-weight:600;
}
.ghost:hover{
  background:var(--btn-hover);
  border-color:var(--line);
}
.ghost:disabled{ opacity:.45; cursor:not-allowed; }
.danger{ color:var(--danger); }

.ghost.active{
  background:var(--btn-active);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line));
}

.title{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  font-size:22px;
  font-weight:700;
  padding:14px 18px 8px;
  font-family:inherit;
}

.body{
  flex:1;
  width:100%;
  resize:none;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  padding:10px 18px 14px;
  font-size:15px;
  line-height:1.55;
  font-family:inherit;
  min-height:0;
}

/* tags block como barra inferior limpia */
.tags{
  border-top:1px solid var(--line);
  background:var(--panel);
  padding:12px 18px;
}

.tags label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
  font-weight:600;
}

.tags input{
  width:100%;
  border:1px solid var(--input-border);
  border-radius:12px;
  background:var(--input-bg);
  color:var(--text);
  padding:10px 12px;
  outline:none;
  font-family:inherit;
}
.tags input:focus{ border-color:var(--focus-border); }

.muted{ color:var(--muted); font-size:13px; }

/* =========================
   EasyMDE (theme-aware + minimal)
========================= */
body[data-theme="dark"] .editor .editor-toolbar,
body[data-theme="dark"] .editor .CodeMirror,
body[data-theme="dark"] .editor .editor-preview {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

body[data-theme="light"] .editor .editor-toolbar,
body[data-theme="light"] .editor .CodeMirror,
body[data-theme="light"] .editor .editor-preview {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* toolbar minimal */
.editor .editor-toolbar{
  border:none !important;
  padding:10px 18px 0 !important;
  background:transparent !important;
}

.editor .editor-toolbar a{
  border:1px solid transparent !important;
  border-radius:10px !important;
}

.editor .editor-toolbar a:hover{
  background:var(--btn-hover) !important;
  border-color:var(--line) !important;
}

.editor .editor-toolbar a.active{
  background:var(--btn-active) !important;
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line)) !important;
}

/* editor area */
.editor .CodeMirror{
  border:none !important;
  padding:0 18px 14px !important;
  min-height: 42vh;
}

body[data-theme="light"] .CodeMirror-cursor { border-left: 1px solid var(--text) !important; }
body[data-theme="light"] .CodeMirror-selected { background: rgba(37,99,235,.12) !important; }

.editor .editor-toolbar a,
.editor .editor-toolbar i,
.editor .fa{
  color: var(--muted) !important;
}

/* =========================
   LOGIN (pro, estable)
========================= */
.login{
  min-height:100vh;
  display:grid;
  place-items:center;
  background: var(--bg);
  padding: 22px;
}

.login-card{
  width: min(520px, 94vw);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 18px 45px rgba(2,6,23,.08);
  padding: 26px;
}

.login-card h1{
  font-size: 34px;
  margin: 0 0 6px;
  letter-spacing: .2px;
}

.login-card .muted{ margin: 0 0 18px; font-size: 13px; }

.login-form .field{ margin: 14px 0 0; }

.login-card label{
  display:block;
  font-size:12px;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 700;
}

.login-card input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  outline:none;
  font-family: inherit;
  font-size: 14px;
}

.login-card input:focus{
  border-color: var(--focus-border);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.login-card .recap,
.login-card .g-recaptcha{
  margin-top: 16px;
  margin-bottom: 16px;
}

.login-card button{
  width:100%;
  margin-top: 6px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  cursor:pointer;
  font-family: inherit;
  font-weight: 800;
}
.login-card button:hover{
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.alert{
  border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  padding:10px 12px;
  border-radius:14px;
  color: color-mix(in srgb, var(--danger) 35%, var(--text));
  font-size:13px;
}

/* ===== NOTE ROWS: 1 divider line + right icons ===== */
.note-item{
  padding:12px 14px;
  cursor:pointer;
  border-bottom:1px solid var(--line);  /* ✅ 1 línea */
  background:transparent;
  transition: background .12s ease;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.note-item:hover{ background:var(--row-hover); }
.note-item.active{ background:var(--row-active); }

/* Left content */
.note-main{ min-width:0; } /* permite ellipsis */
.note-title{
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:600;
  line-height:1.2;
}
.note-meta{ margin-top:6px; }
.snippet{
  color:var(--muted);
  font-size:13px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 100%;
}
.note-tags{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  opacity:.9;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Right icon column */
.note-icons{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  align-items:center;
  opacity:.9;
  margin-top:2px;
}

.note-icons i{
  color:var(--muted);
  font-size:13px;
}

.note-item.active .note-icons i{
  color: color-mix(in srgb, var(--accent) 60%, var(--muted));
}

/* Buttons with icons + text */
.ghost i{ margin-right:8px; opacity:.9; }
.ghost .btn-text{ font-weight:700; }

/* compact on mobile */
@media (max-width: 520px){
  .ghost .btn-text{ display:none; }
  .ghost i{ margin-right:0; }
}

/* Sidebar: solo título + pills */
.note-title-text{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 100%;
}

/* pills */
.note-tags{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.tag-pill{
  font-size:11px;
  line-height:1;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 85%, transparent);
}

.tag-pill.more{
  border-style:dashed;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ height:45vh; border-right:none; border-bottom:1px solid var(--line); }
  .editor{ height:55vh; }
}