/* ============================================================
   Papel & Mente — Diario Personal Interactivo (PWA)
   Estética: Digital Notebook / papelería fina
   Temas y texturas 100% variables CSS
   ============================================================ */

/* ── Base tipográfica y medidas ───────────────────────────── */
:root {
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-hand: "Patrick Hand", "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  --font-title: "Caveat", "Lora", Georgia, serif;
  --font-type: "Courier New", "Consolas", ui-monospace, monospace;
  --font-sheet: var(--font-serif);

  --line: 32px;              /* altura de renglón = separación de líneas */
  --dot: 22px;               /* retícula bullet journal */
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-sheet: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 6px -2px rgba(24, 38, 30, .16), 0 16px 32px -18px rgba(24, 38, 30, .38), 0 40px 70px -40px rgba(24, 38, 30, .55);
  --shadow-ui: 0 10px 30px -18px rgba(20, 30, 24, .6);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Tema 1 · Verde Sabio / Menta (por defecto) ───────────── */
html[data-theme="sabio"] {
  --desk-bg: radial-gradient(120% 120% at 12% 0%, #e4efe7 0%, #d7e5dc 55%, #cfdfd5 100%);
  --paper: #eef7f1;
  --paper-2: #e7f2ea;
  --ink: #1f3129;
  --ink-soft: #476054;
  --muted: #6f8a7c;
  --accent: #4f8a6b;
  --accent-soft: rgba(79, 138, 107, .14);
  --rule: rgba(79, 138, 107, .22);
  --dot: rgba(79, 138, 107, .38);
  --margin-line: rgba(198, 96, 96, .28);
  --ui-bg: rgba(255, 255, 255, .78);
  --ui-border: rgba(31, 49, 41, .12);
  --sel: rgba(79, 138, 107, .25);
  --accent-ink: #ffffff;
  --theme-color: #4f8a6b;
  --cover: #3d6b55;
  --cover-2: #2b4d3d;
  --cover-ink: #eef7f1;
  --cover-soft: rgba(255, 255, 255, .13);
}

/* ── Tema 2 · Crema Cálido (Moleskine) ────────────────────── */
html[data-theme="crema"] {
  --desk-bg: radial-gradient(120% 120% at 10% 0%, #f4ead6 0%, #ecdfc6 55%, #e3d5ba 100%);
  --paper: #fdf6e6;
  --paper-2: #f7edd8;
  --ink: #3a3128;
  --ink-soft: #5f5344;
  --muted: #8a7a63;
  --accent: #a9773f;
  --accent-soft: rgba(169, 119, 63, .14);
  --rule: rgba(169, 119, 63, .22);
  --dot: rgba(169, 119, 63, .38);
  --margin-line: rgba(190, 92, 78, .3);
  --ui-bg: rgba(255, 252, 244, .8);
  --ui-border: rgba(58, 49, 40, .12);
  --sel: rgba(169, 119, 63, .25);
  --accent-ink: #fffaf0;
  --theme-color: #a9773f;
  --cover: #6d5133;
  --cover-2: #52402a;
  --cover-ink: #fdf3e2;
  --cover-soft: rgba(255, 255, 255, .14);
}

/* ── Tema 3 · Rosa Pastel (Sakura) ────────────────────────── */
html[data-theme="sakura"] {
  --desk-bg: radial-gradient(120% 120% at 12% 0%, #fbe6ec 0%, #f7dbe4 55%, #f1d2dd 100%);
  --paper: #fdeef2;
  --paper-2: #fbe6ec;
  --ink: #3c2830;
  --ink-soft: #63454f;
  --muted: #98707d;
  --accent: #cf6d8f;
  --accent-soft: rgba(207, 109, 143, .14);
  --rule: rgba(207, 109, 143, .2);
  --dot: rgba(207, 109, 143, .36);
  --margin-line: rgba(207, 109, 143, .3);
  --ui-bg: rgba(255, 248, 250, .82);
  --ui-border: rgba(60, 40, 48, .11);
  --sel: rgba(207, 109, 143, .25);
  --accent-ink: #fff7fa;
  --theme-color: #cf6d8f;
  --cover: #a44f6d;
  --cover-2: #833e58;
  --cover-ink: #fdeef3;
  --cover-soft: rgba(255, 255, 255, .16);
}

/* ── Tema 4 · Lavanda Serenidad ───────────────────────────── */
html[data-theme="lavanda"] {
  --desk-bg: radial-gradient(120% 120% at 12% 0%, #eae6fa 0%, #e2dcf6 55%, #d9d2f0 100%);
  --paper: #f2eefc;
  --paper-2: #ebe5f9;
  --ink: #2c2740;
  --ink-soft: #4d4668;
  --muted: #7d7597;
  --accent: #6f60bd;
  --accent-soft: rgba(111, 96, 189, .14);
  --rule: rgba(111, 96, 189, .2);
  --dot: rgba(111, 96, 189, .36);
  --margin-line: rgba(111, 96, 189, .28);
  --ui-bg: rgba(252, 251, 255, .82);
  --ui-border: rgba(44, 39, 64, .11);
  --sel: rgba(111, 96, 189, .25);
  --accent-ink: #fbfaff;
  --theme-color: #6f60bd;
  --cover: #55489c;
  --cover-2: #3f357a;
  --cover-ink: #f1edfd;
  --cover-soft: rgba(255, 255, 255, .16);
}

/* ── Tema 5 · Carbón Nocturno (Dark Mode) ─────────────────── */
html[data-theme="carbon"] {
  --desk-bg: radial-gradient(120% 120% at 12% 0%, #2a2f38 0%, #23272f 55%, #1b1f25 100%);
  --paper: #262b33;
  --paper-2: #21262d;
  --ink: #e9e6df;
  --ink-soft: #b9b5ab;
  --muted: #8b8880;
  --accent: #8fbfa6;
  --accent-soft: rgba(143, 191, 166, .16);
  --rule: rgba(233, 230, 223, .13);
  --dot: rgba(233, 230, 223, .28);
  --margin-line: rgba(214, 122, 122, .25);
  --ui-bg: rgba(38, 43, 51, .85);
  --ui-border: rgba(233, 230, 223, .12);
  --sel: rgba(143, 191, 166, .28);
  --accent-ink: #1b1f25;
  --shadow-sheet: 0 18px 46px -20px rgba(0, 0, 0, .85);
  --theme-color: #23272f;
  --cover: #14171c;
  --cover-2: #0d0f13;
  --cover-ink: #e9e6df;
  --cover-soft: rgba(255, 255, 255, .07);
  color-scheme: dark;
}

/* ── Tipografía del lienzo ────────────────────────────────── */
html[data-font="serif"] { --font-sheet: var(--font-serif); }
html[data-font="hand"]  { --font-sheet: var(--font-hand); --line: 34px; }
html[data-font="hand"] .editor { font-size: 1.18rem; letter-spacing: .2px; }
html[data-font="type"] .editor { font-size: .98rem; }
html[data-font="type"]  { --font-sheet: var(--font-type); }

/* ── Reset ────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--desk-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* Sin esta regla, display:flex de .floating-toolbar anula el atributo hidden y la barra
   de formato se pinta siempre, encima de los emojis del Mood Tracker. */
[hidden] { display: none !important; }

/* ── Layout ───────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 308px 1fr; height: 100vh; height: 100dvh; }

.sidebar {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 26px 18px 16px;
  background: linear-gradient(180deg, var(--cover) 0%, var(--cover-2) 100%);
  color: var(--cover-ink);
  border-right: none;
  min-height: 0;
  box-shadow: 14px 0 34px -22px rgba(0, 0, 0, .65), inset -2px 0 0 rgba(255, 255, 255, .07);
}
.sidebar::after {
  content: ""; position: absolute; top: 12px; bottom: 12px; right: 9px;
  border-right: 2px dashed var(--cover-soft); pointer-events: none;
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand h1 { font-size: 1.12rem; margin: 0; letter-spacing: .2px; }
.brand-sub { margin: 2px 0 0; font-size: .76rem; color: var(--muted); }
.brand-mark { font-size: 1.6rem; }

.side-actions { display: flex; flex-direction: column; gap: 8px; }
.search, .tags-input, .entry-title, .pin-setup input, .field select {
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
}
.search::placeholder, .tags-input::placeholder { color: var(--muted); }

.btn {
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 9px 13px; cursor: pointer; font-size: .9rem; font-weight: 600;
  transition: transform .12s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-ui); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: var(--ui-border); color: var(--ink-soft); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--ink); }

.entry-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.entry-card {
  text-align: left; width: 100%; cursor: pointer;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  border: 1px solid var(--ui-border); border-left: 3px solid transparent;
  border-radius: var(--radius-sm); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.entry-card:hover { background: var(--paper); transform: translateX(2px); }
.entry-card[aria-current="true"] { border-left-color: var(--accent); background: var(--paper); }
.entry-card .ec-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.entry-card .ec-title { font-weight: 650; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-card .ec-mood { font-size: 1rem; }
.entry-card .ec-snippet { font-size: .78rem; color: var(--muted); line-height: 1.35; max-height: 2.7em; overflow: hidden; }
.entry-card .ec-date { font-size: .7rem; color: var(--muted); letter-spacing: .3px; text-transform: uppercase; }
.empty-note { color: var(--muted); font-size: .84rem; padding: 10px 4px; line-height: 1.5; }

.side-footer { border-top: 1px solid var(--ui-border); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.storage-note { font-size: .7rem; color: var(--muted); letter-spacing: .3px; }
.side-buttons { display: flex; gap: 8px; }
.side-buttons .btn { flex: 1; }

/* Contraste propio de la pasta: textos, campos y tarjetas legibles sobre el color de cubierta */
.sidebar .brand h1 { font-family: var(--font-title); font-size: 1.85rem; line-height: 1; font-weight: 700; letter-spacing: .4px; color: var(--cover-ink); }
.sidebar .brand-sub, .sidebar .storage-note { color: var(--cover-ink); opacity: .68; }
.sidebar .empty-note { color: var(--cover-ink); opacity: .82; }
.sidebar .search { background: var(--cover-soft); border-color: rgba(255, 255, 255, .16); color: var(--cover-ink); }
.sidebar .search::placeholder { color: var(--cover-ink); opacity: .55; }
.sidebar .btn-primary { background: var(--cover-ink); color: var(--cover); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .85); }
.sidebar .btn-primary:hover { filter: none; background: #fff; color: var(--cover-2); }
.sidebar .btn-ghost { border-color: rgba(255, 255, 255, .26); color: var(--cover-ink); background: transparent; }
.sidebar .btn-ghost:hover { background: var(--cover-soft); color: var(--cover-ink); }
.sidebar .entry-card { background: var(--cover-soft); border-color: transparent; border-left: 3px solid transparent; color: var(--cover-ink); }
.sidebar .entry-card:hover { background: rgba(255, 255, 255, .2); transform: translateX(3px); }
.sidebar .entry-card[aria-current="true"] { background: rgba(255, 255, 255, .22); border-left-color: var(--accent); }
.sidebar .ec-snippet, .sidebar .ec-date { color: var(--cover-ink); opacity: .66; }

/* ── Escritorio + cabecera ────────────────────────────────── */
.desk { min-width: 0; min-height: 0; padding: 18px 26px 26px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.page-header { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }

.mood-tracker { display: flex; align-items: center; gap: 10px; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: 999px; padding: 6px 14px 6px 16px; backdrop-filter: blur(12px); }
.mood-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.moods { display: flex; gap: 4px; }
.mood {
  border: none; background: transparent; cursor: pointer; font-size: 1.3rem; line-height: 1;
  padding: 5px 7px; border-radius: 999px; transition: transform .15s var(--ease), background .18s var(--ease);
  filter: grayscale(.55) opacity(.7);
}
.mood:hover { transform: translateY(-2px) scale(1.08); filter: none; }
.mood[aria-pressed="true"] {
  background: var(--accent-soft); filter: none; transform: scale(1.14);
  box-shadow: 0 0 0 2px var(--accent), 0 8px 16px -10px rgba(0, 0, 0, .7);
}

.header-side { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-switch, .paper-switch { display: flex; gap: 5px; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: 999px; padding: 5px 7px; backdrop-filter: blur(12px); }
.swatch {
  position: relative; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .75);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .10);
  transition: transform .16s var(--ease), box-shadow .18s var(--ease);
}
.swatch:hover { transform: translateY(-2px) scale(1.06); }
.swatch[aria-pressed="true"] {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent), 0 6px 14px -6px rgba(0, 0, 0, .5);
}
.swatch[aria-pressed="true"]::after {
  content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .74rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
[data-theme-choice="sabio"]   { background: #4f8a6b; }
[data-theme-choice="crema"]   { background: #c99a5b; }
[data-theme-choice="sakura"]  { background: #cf6d8f; }
[data-theme-choice="lavanda"] { background: #6f60bd; }
[data-theme-choice="carbon"]  { background: #23272f; }
.paper-btn {
  position: relative; border: 1px solid transparent; background: transparent; color: var(--ink-soft);
  cursor: pointer; border-radius: 999px; padding: 5px 12px 5px 30px; font-size: .76rem; font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}
.paper-btn::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 3px;
  border: 1px solid var(--ui-border); background-color: var(--paper);
}
.paper-btn:nth-child(2)::before { background-image: repeating-linear-gradient(to bottom, transparent 0 3px, var(--rule) 3px 4px); }
.paper-btn:nth-child(3)::before { background-image: radial-gradient(var(--dot) 1px, transparent 1.1px); background-size: 5px 5px; }
.paper-btn:hover { background: var(--accent-soft); color: var(--ink); }
.paper-btn[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.paper-btn[aria-pressed="true"]::before { border-color: rgba(255, 255, 255, .55); }

/* ── La hoja ──────────────────────────────────────────────── */
.sheet {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-radius: var(--radius);
  padding: 22px 30px 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--ui-border),
    5px 5px 0 -1px var(--paper-2),
    9px 9px 0 -2px var(--ui-border),
    var(--shadow-sheet);
}
.sheet::before { /* margen de cuaderno */
  content: ""; position: absolute; top: 0; bottom: 0; left: 74px; width: 1px;
  background: var(--margin-line); opacity: .9; pointer-events: none;
}
.entry-title {
  border: none; background: transparent; padding: 0 0 2px; margin-left: 62px;
  font-family: var(--font-title); font-size: 2.05rem; font-weight: 700; letter-spacing: .3px; color: var(--ink);
}
.entry-title::placeholder { color: var(--muted); opacity: .75; font-weight: 500; }
.entry-title:focus { outline: none; }
.entry-meta { margin-left: 62px; display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.dot-sep { opacity: .6; }
.tags-input { border: none; background: transparent; padding: 2px 0; font-size: .74rem; letter-spacing: .05em; text-transform: none; flex: 1; min-width: 0; }
.tags-input:focus { outline: none; }

.paper-surface { position: relative; flex: 1; min-height: 0; margin: 12px 0 0 62px; overflow: hidden; }
.editor {
  height: 100%; overflow-y: auto; padding: 4px 8px 40px 12px;
  font-family: var(--font-sheet); font-size: 1.06rem; line-height: var(--line); color: var(--ink);
  outline: none; word-break: break-word;
}
.editor:empty::before { content: attr(data-placeholder); color: var(--muted); opacity: .7; }
.editor > *:first-child { margin-top: 0; }
.editor blockquote { margin: 0 0 0 2px; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic; }
.editor ul.checklist { list-style: none; margin: 0; padding-left: 4px; }
.editor ul.checklist > li { position: relative; padding-left: 30px; cursor: text; }
.editor ul.checklist > li::before {
  content: ""; position: absolute; left: 4px; top: calc((var(--line) - 17px) / 2);
  width: 15px; height: 15px; border-radius: 4px; border: 1.6px solid var(--accent);
  background: transparent; cursor: pointer; transition: background .15s var(--ease);
}
.editor ul.checklist > li.done { color: var(--muted); text-decoration: line-through; }
.editor ul.checklist > li.done::before { background: var(--accent); }
.editor ul.checklist > li.done::after {
  content: "✓"; position: absolute; left: 7px; top: calc((var(--line) - 17px) / 2 - 1px);
  font-size: .74rem; color: var(--accent-ink); pointer-events: none;
}
::selection { background: var(--sel); }

.sheet-footer { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--muted); border-top: 1px dashed var(--rule); padding-top: 8px; }
.save-status { display: inline-flex; align-items: center; gap: 6px; }
.save-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.save-status[data-state="saving"]::before { background: #d8a13a; }
.save-status[data-state="saved"]::before { background: var(--accent); }
.save-status[data-state="error"]::before { background: #c9564f; }

/* ── Texturas de hoja ─────────────────────────────────────── */
html[data-paper="liso"] .paper-surface,
html[data-paper="liso"] .editor { background-image: none; }
html[data-paper="lineas"] .paper-surface {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line));
  background-position: 0 4px;
}
html[data-paper="puntos"] .paper-surface {
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.2px);
  background-size: var(--dot) var(--dot);
  background-position: 12px 10px;
}

/* ── Menú flotante de formato ─────────────────────────────── */
.floating-toolbar {
  position: fixed; z-index: 60; display: flex; gap: 2px; padding: 5px;
  background: var(--paper); border: 1px solid var(--ui-border); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 26px -14px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .35);
  animation: pop .14s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.floating-toolbar button {
  border: none; background: transparent; cursor: pointer; min-width: 34px; height: 32px;
  border-radius: 8px; font-size: .95rem; color: var(--ink-soft);
}
.floating-toolbar button:hover { background: var(--accent-soft); color: var(--ink); }

/* ── Paneles / Ajustes ────────────────────────────────────── */
.panel { border: 1px solid var(--ui-border); border-radius: var(--radius); padding: 0; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sheet); max-width: 460px; width: 92vw; }
.panel::backdrop { background: rgba(12, 18, 14, .45); backdrop-filter: blur(3px); }
.panel-inner { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 16px; }
.panel h2 { margin: 0; font-size: 1.1rem; }
.panel fieldset { border: 1px solid var(--ui-border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.panel legend { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 0 6px; }
.radio, .switch { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-soft); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--muted); }
.pin-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pin-setup input { letter-spacing: .5em; text-align: center; }
.pin-setup .btn { grid-column: 1 / -1; }
.hint { margin: 0; font-size: .74rem; color: var(--muted); line-height: 1.45; }
.panel-actions { display: flex; justify-content: flex-end; }

/* ── Pantalla de bloqueo ──────────────────────────────────── */
.lock-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--desk-bg); }
.lock-screen[hidden] { display: none; }
.lock-card { width: min(340px, 90vw); text-align: center; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sheet); }
.lock-brand { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; }
.lock-msg { color: var(--muted); font-size: .84rem; margin: 6px 0 16px; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; }
.pin-dots span { width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid var(--accent); }
.pin-dots span.on { background: var(--accent); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { border: 1px solid var(--ui-border); background: var(--paper); border-radius: 12px; padding: 12px 0; font-size: 1.05rem; cursor: pointer; }
.keypad button:hover { background: var(--accent-soft); }
.lock-error { min-height: 1.1em; margin: 12px 0 0; color: #c9564f; font-size: .8rem; }
.shake { animation: shake .32s var(--ease); }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1120px) {
  .app { grid-template-columns: 262px 1fr; }
  .desk { padding: 16px 18px 22px; }
  .sheet { padding: 20px 22px 12px; }
  .sheet::before { left: 62px; }
  .entry-title, .entry-meta, .paper-surface { margin-left: 52px; }
}
@media (max-width: 760px) {
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100dvh; }
  .sidebar { border-right: none; border-bottom: none; max-height: 46vh; max-height: 46dvh; box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .7); }
  .sidebar::after { display: none; }
  .desk { padding: 12px 12px 20px; overflow: visible; }
  .sheet { padding: 16px 16px 12px; }
  .sheet::before, .entry-title, .entry-meta { margin-left: 0; }
  .sheet::before { display: none; }
  .paper-surface { margin-left: 0; }
  .header-side { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ============================================================
   FASE 2 · Fotos Polaroid, hashtags, busqueda real y nube
   ============================================================ */

/* --- Buscador con boton de limpiar y contador --- */
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap .search { width: 100%; padding-right: 34px; }
.search-clear {
  position: absolute; right: 6px; border: none; background: transparent; cursor: pointer;
  color: var(--cover-ink); opacity: .6; font-size: 1.05rem; line-height: 1; padding: 2px 7px; border-radius: 50%;
}
.search-clear:hover { opacity: 1; background: var(--cover-soft); }
.list-count { font-size: .72rem; letter-spacing: .04em; color: var(--cover-ink); opacity: .6; margin-top: -6px; }

/* --- Etiquetas y resultados resaltados --- */
.ec-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.ec-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ec-tag { font-size: .66rem; color: var(--cover-ink); opacity: .75; background: var(--cover-soft); border-radius: 999px; padding: 1px 7px; }
mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: inset 0 0 0 1px var(--accent); }

/* --- Gestion de etiquetas: pildoras con borrado y alta manual --- */
.tag-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px 62px; }
.tags-label { font-size: .74rem; letter-spacing: .08em; }
.tag-panel .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 1px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 999px; padding: 1px 3px 1px 1px;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease);
}
.tag-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .7); }
.tag-chip-txt {
  border: none; background: transparent; cursor: pointer; color: var(--ink);
  font-size: .75rem; font-weight: 600; padding: 3px 7px; border-radius: 999px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.tag-chip-txt:hover { background: var(--accent); color: var(--accent-ink); }
.tag-chip-del {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: none; background: transparent; cursor: pointer; color: var(--ink-soft);
  border-radius: 50%; font-size: .85rem; line-height: 1;
  transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.tag-chip-del:hover { background: #c9564f; color: #fff; transform: scale(1.15) rotate(90deg); }
.tag-add { display: inline-flex; align-items: center; gap: 6px; }
.tag-input {
  width: 12ch; padding: 4px 9px; color: var(--ink);
  background: var(--paper-2); border: 1px dashed var(--ui-border); border-radius: var(--radius-sm);
  font-size: .76rem;
  transition: width .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.tag-input::placeholder { color: var(--muted); }
.tag-input:focus { width: 18ch; outline: none; border-style: solid; border-color: var(--accent); background: var(--paper); }
.tag-add-btn {
  border: 1px solid var(--ui-border); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 4px 12px; font-size: .74rem; font-weight: 600; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.tag-add-btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: translateY(-1px); }
.tag-add-btn:active { transform: translateY(0) scale(.98); }
.tag-panel.tag-error .tag-add-btn { border-color: #c9564f; color: #c9564f; }
.tag-input.shake-input { border-color: #c9564f; animation: sacudida-etiqueta .4s var(--ease); }
@keyframes sacudida-etiqueta { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (max-width: 760px) { .tag-panel { margin-left: 0; } }

/* --- Fotos estilo Polaroid --- */
.editor.drag-over { outline: 2px dashed var(--accent); outline-offset: 4px; background: var(--accent-soft); border-radius: 10px; }
.editor figure.polaroid {
  display: inline-block; position: relative; margin: 14px 10px; padding: 12px 12px 46px;
  background: #fff; border-radius: 3px; width: 320px; max-width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 24px -14px rgba(0, 0, 0, .55);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.editor figure.polaroid:hover {
  transform: rotate(0deg) scale(1.015);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 18px 34px -16px rgba(0, 0, 0, .6);
}
.editor figure.polaroid img { display: block; max-width: 100%; height: auto; border-radius: 2px; background: #f0f0f0; }
.editor figure.polaroid img.missing { min-width: 220px; min-height: 140px; outline: 2px dashed #c9564f; }
.editor figure.polaroid figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 10px; min-height: 1.4em;
  font-family: var(--font-hand); font-size: 1.02rem; line-height: 1.3; color: #3b3b3b;
  text-align: center; outline: none;
}
.editor figure.polaroid figcaption:empty::before { content: attr(data-placeholder); color: #ababab; }
.polaroid-del {
  position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: #2b2b2b; color: #fff; font-size: .95rem; line-height: 1; cursor: pointer;
  opacity: 0; transform: scale(.85);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .7);
}
.editor figure.polaroid:hover .polaroid-del { opacity: 1; transform: scale(1); }

/* --- Pie de la hoja: boton de foto --- */
.footer-tools { display: inline-flex; align-items: center; gap: 12px; }
.photo-btn {
  border: 1px solid var(--ui-border); background: var(--accent-soft); color: var(--ink);
  border-radius: 999px; padding: 4px 12px; font-size: .74rem; font-weight: 600; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.photo-btn:hover { background: var(--accent); color: var(--accent-ink); }
.photo-btn:active { transform: translateY(1px); }

/* --- Ajustes: campos de la nube y biometria --- */
.panel input[type="url"], .panel input[type="text"], .panel input[type="password"], .panel input[type="email"] {
  background: var(--paper-2); border: 1px solid var(--ui-border); border-radius: var(--radius-sm);
  padding: 8px 10px; width: 100%; font-size: .84rem;
}
.panel code { background: var(--accent-soft); border-radius: 4px; padding: 0 4px; font-size: .76rem; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cloud-status { font-size: .74rem; color: var(--muted); line-height: 1.5; margin: 0; }
.cloud-status b { color: var(--ink); }
.cloud-error { color: #c9564f; }
.bio-unlock { margin-top: 14px; width: 100%; }

@media (max-width: 760px) {
  .tag-chips { margin-left: 0; }
  .editor figure.polaroid { max-width: 100%; }
}
.photo-btn.danger { border-color: rgba(201, 86, 79, .5); color: #c9564f; background: rgba(201, 86, 79, .10); }
.photo-btn.danger:hover { background: #c9564f; color: #fff; }


/* ============================================================
   FASE 2.5 · bloques modulares + leyendas flotantes (tooltips)
   ============================================================ */

/* --- Tooltips elegantes: data-tip (visual) + title (nativo) ---
   :where() mantiene especificidad 0 para no romper posiciones ya definidas */
:where([data-tip]) { position: relative; }
[data-tip]::after, .swatch[data-tip]::before {
  content: attr(data-tip);
  position: absolute; left: 50%; top: calc(100% + 9px);
  transform: translate(-50%, 4px) scale(.97);
  background: rgba(18, 22, 26, .95); color: #fff;
  font-family: var(--font-ui); font-size: .72rem; font-weight: 500; line-height: 1.35;
  letter-spacing: .1px; text-align: center; text-transform: none;
  padding: 6px 10px; border-radius: 8px; width: max-content; max-width: 240px;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12);
  pointer-events: none; opacity: 0; z-index: 95;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after,
.swatch[data-tip]:hover::before, .swatch[data-tip]:focus-visible::before {
  opacity: 1; transform: translate(-50%, 0) scale(1);
}
[data-tip][data-tip-pos="right"]::after {
  left: calc(100% + 10px); top: 50%; transform: translate(-5px, -50%) scale(.97);
}
[data-tip][data-tip-pos="right"]:hover::after,
[data-tip][data-tip-pos="right"]:focus-visible::after { transform: translate(0, -50%) scale(1); }
[data-tip][data-tip-pos="up"]::after {
  top: auto; bottom: calc(100% + 9px); transform: translate(-50%, -4px) scale(.97);
}
[data-tip][data-tip-pos="up"]:hover::after,
[data-tip][data-tip-pos="up"]:focus-visible::after { transform: translate(-50%, 0) scale(1); }

/* --- Barra de insercion de bloques --- */
.block-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px 62px; }
.block-add {
  border: 1px dashed var(--ui-border); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 4px 11px; font-size: .73rem; font-weight: 600; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.block-add:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
.block-add:active { transform: translateY(0); }

/* --- Manija flotante del bloque (arriba/abajo/eliminar) --- */
.block-rail {
  position: fixed; z-index: 70; display: flex; gap: 2px; padding: 3px;
  background: var(--paper); border: 1px solid var(--ui-border); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 26px -16px rgba(0, 0, 0, .65);
  /* Se oculta con opacidad, no con display: asi el puente puede mantener el hover.
     Nunca deja un area invisible que capture clics (pointer-events: none). */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(5px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s linear;
}
/* Visible con la clase .on (JS: bloque bajo el raton o caret dentro) y tambien
   mientras el raton o el foco esten sobre la propia botonera */
.block-rail.on,
.block-rail:hover,
.block-rail:focus-within {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
/* Puente transparente: cubre el hueco entre el bloque y la botonera para que el
   navegador no detecte la salida del raton al ir del texto a los botones */
.block-rail::before {
  content: ""; position: absolute; top: -12px; bottom: -12px;
  left: 100%; width: 44px;
}
.rail-btn {
  min-width: 28px; height: 30px; border: none; background: transparent; cursor: pointer;
  border-radius: 7px; color: var(--ink-soft); font-size: .82rem; line-height: 1;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.rail-btn:hover { background: var(--accent-soft); color: var(--ink); }
.rail-btn.danger:hover { background: rgba(201, 86, 79, .16); color: #c9564f; }
.rail-btn.handle { cursor: grab; letter-spacing: -1px; }
.rail-btn.handle:active { cursor: grabbing; }
.rail-btn:disabled { opacity: .3; cursor: default; }
.rail-btn:disabled:hover { background: transparent; }
.editor > .block-dragging { opacity: .45; outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 8px; }

/* --- Bloques especiales --- */
.editor h3.b-title { font-family: var(--font-title); font-size: 1.7rem; font-weight: 700; line-height: 1.15; margin: 10px 0 2px; }
.editor .b-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 12px 0; padding: 14px 16px; border-radius: 4px;
  background: #fdf3b6; color: #3f3620; font-family: var(--font-hand); font-size: 1.14rem; line-height: 1.45;
  box-shadow: 0 12px 22px -16px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(0, 0, 0, .07);
  transform: rotate(-.35deg);
}
/* Icono fijo del post-it: no editable ni seleccionable */
.editor .b-note-icon { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.45; user-select: none; }
/* Unica zona editable de la nota: crece hacia abajo */
.editor .b-note-text {
  flex: 1 1 auto; min-width: 0; line-height: 1.45;
  outline: none; word-break: break-word; cursor: text;
}
.editor .b-quote {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 12px 0; padding: 10px 16px; border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 8px 8px 0;
  font-family: var(--font-serif); color: var(--ink-soft);
}
/* Comilla decorativa fija: no editable ni seleccionable */
.editor .b-quote-mark {
  flex: 0 0 auto; font-size: 2.6rem; line-height: .85;
  color: var(--accent); opacity: .55; user-select: none;
}
.editor .b-quote-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.editor .b-quote-text {
  outline: none; font-style: italic; font-size: 1.1rem; line-height: 1.5;
  word-break: break-word; cursor: text;
}
.editor .b-quote-author {
  align-self: flex-end; min-width: 4ch; outline: none; cursor: text;
  font-family: var(--font-ui); font-size: .74rem; font-style: normal;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.editor .b-quote-author:empty::before { content: attr(data-placeholder); opacity: .75; }
.editor .b-sprout {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 10px 0; padding: 10px 14px;
  border: 1px solid var(--ui-border); border-left: 4px solid var(--accent); border-radius: 10px;
  background: var(--accent-soft); font-size: .98rem;
}
/* La pregunta nunca se parte en dos renglones ni se encoge */
.editor .b-sprout-label {
  flex: 0 0 auto; flex-shrink: 0; white-space: nowrap;
  font-weight: 600; line-height: 1.5;
}
/* Zona de escritura: se queda arriba y crece hacia abajo */
.editor .b-sprout-text {
  flex: 1 1 auto; min-width: 0; line-height: 1.5;
  outline: none; word-break: break-word; cursor: text;
}
/* Compatibilidad con Brotes antiguos que aun tengan el emoji suelto */
.editor .b-sprout-mark { flex: 0 0 auto; white-space: nowrap; font-size: 1.15rem; line-height: 1.5; }
html[data-theme="carbon"] .editor .b-note { background: #4a4426; color: #f7f0d6; }

@media (max-width: 760px) {
  .block-bar { margin-left: 0; }
}

/* --- Tamanos de la Polaroid: S 200px / M 320px (por defecto) / L ancho completo --- */
.editor figure.polaroid.size-s { width: 200px; }
.editor figure.polaroid.size-m { width: 320px; }
.editor figure.polaroid.size-l { width: 100%; }
.editor figure.polaroid.size-s figcaption { font-size: .92rem; }
.editor figure.polaroid.size-l figcaption { font-size: 1.12rem; }

/* --- Menu discreto de tamano dentro del marco --- */
.editor figure.polaroid .polaroid-size {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: flex; gap: 2px; padding: 2px; border-radius: 8px;
  background: rgba(18, 22, 26, .82);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.editor figure.polaroid:hover .polaroid-size,
.editor figure.polaroid:focus-within .polaroid-size { opacity: 1; transform: none; }
.editor figure.polaroid .polaroid-size button {
  width: 24px; height: 22px; border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1;
}
.editor figure.polaroid .polaroid-size button:hover { background: rgba(255, 255, 255, .24); }
.editor figure.polaroid .polaroid-size button.on { background: var(--accent); color: var(--accent-ink); }
/* En pantallas sin raton (tactil) el menu queda siempre a la vista */
@media (hover: none) {
  .editor figure.polaroid .polaroid-size { opacity: 1; transform: none; }
}

/* --- Brote en pantallas estrechas: la pregunta pasa arriba y se permite cortar --- */
@media (max-width: 760px) {
  .editor .b-sprout { flex-direction: column; gap: 6px; }
  .editor .b-sprout-label { white-space: normal; }
}

/* --- Cita y Nota en pantallas estrechas --- */
@media (max-width: 760px) {
  .editor .b-quote-mark { font-size: 2rem; }
  .editor .b-quote { gap: 8px; }
  .editor .b-note { font-size: 1.06rem; }
}

/* ============================================================
   DICTADO POR VOZ · boton activo, vista previa y avisos
   ============================================================ */
.photo-btn.dictando {
  background: #c9564f; border-color: #c9564f; color: #fff;
  animation: pulso-dictado 1.4s var(--ease) infinite;
}
@keyframes pulso-dictado {
  0%   { box-shadow: 0 0 0 0 rgba(201, 86, 79, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(201, 86, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 86, 79, 0); }
}
.photo-btn:disabled { opacity: .5; cursor: not-allowed; }
.photo-btn:disabled:hover { background: var(--accent-soft); color: var(--ink); }

/* Burbuja con el texto provisional (no se guarda en la pagina) */
.dictado-preview {
  position: fixed; left: 50%; bottom: 24px; z-index: 90;
  display: flex; align-items: center; gap: 9px;
  max-width: min(560px, 82vw); padding: 9px 15px;
  background: rgba(18, 22, 26, .94); color: #fff; border-radius: 999px;
  font-family: var(--font-ui); font-size: .8rem; font-style: italic;
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .85);
  opacity: 0; pointer-events: none; transform: translate(-50%, 8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.dictado-preview.ver { opacity: 1; transform: translate(-50%, 0); }
.dictado-preview span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dictado-punto {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #e0564f;
  animation: pulso-dictado 1.4s var(--ease) infinite;
}

/* Avisos discretos abajo a la derecha */
.toast-box {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  max-width: min(380px, 86vw); padding: 10px 14px;
  background: rgba(18, 22, 26, .95); color: #fff; border-radius: 10px;
  font-family: var(--font-ui); font-size: .8rem; line-height: 1.45;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .85);
  opacity: 0; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.ver { opacity: 1; transform: none; }
.toast.aviso { border-left: 3px solid #d8a13a; }
.toast.error { border-left: 3px solid #c9564f; }

/* --- Panel de nube: separador y estado de sesion --- */
.panel-sep { border: none; border-top: 1px dashed var(--ui-border); margin: 2px 0; }
#sbSession { font-weight: 600; }

/* ============================================================
   Nube de etiquetas de la barra lateral (sobre la pasta)
   ============================================================ */
.tag-cloud-box {
  display: flex; flex-direction: column; gap: 7px;
  border-top: 1px solid var(--cover-soft); padding-top: 9px;
}
.tag-cloud-box[hidden] { display: none !important; }
.tag-cloud-head {
  display: flex; align-items: center; gap: 7px; width: 100%;
  border: none; background: transparent; cursor: pointer; padding: 1px 0;
  color: var(--cover-ink); opacity: .85;
  font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  transition: opacity .18s var(--ease);
}
.tag-cloud-head:hover { opacity: 1; }
.tag-cloud-count {
  background: var(--cover-soft); color: var(--cover-ink);
  border-radius: 999px; padding: 0 7px; font-size: .66rem; letter-spacing: 0;
}
.tag-cloud-chevron { margin-left: auto; font-size: .68rem; letter-spacing: 0; }
.tag-cloud {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 118px; overflow-y: auto; padding-right: 3px;
}
.tag-cloud-box.plegado .tag-cloud { display: none; }
.tag-cloud-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--cover-soft); background: var(--cover-soft); color: var(--cover-ink);
  border-radius: 999px; padding: 3px 9px; font-size: .72rem; font-weight: 600; cursor: pointer;
  transition: background .18s var(--ease), transform .12s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.tag-cloud-chip:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.tag-cloud-chip.activa { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tag-cloud-n {
  font-size: .63rem; opacity: .85; background: rgba(0, 0, 0, .2);
  border-radius: 999px; padding: 0 5px;
}
.tag-cloud-chip.activa .tag-cloud-n { background: rgba(0, 0, 0, .24); }