/* Tokens del Believe Brand System v.2026. Cero gradientes, cero sombras,
   radio maximo 2px, hairline como unica separacion. El cian solo senaliza:
   aca se usa unicamente en el wordmark, que es identidad y no cuenta cuota. */
/* Las tres voces del sistema, empaquetadas: el CSP de las extensiones bloquea
   Google Fonts, y en local no hay costo de red. Inter y JetBrains Mono subset
   latino pesan 47 KB y 40 KB — mas barato que el propio Fraunces. */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces.ttf') format('truetype-variations');
  font-weight: 300 600;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg: #fafaf7;        /* Paper 50 */
  --card: #fafaf7;      /* mismo papel: la separacion la da el hairline, no un fill */
  /* Hairline del sistema (azul al 10%, no un gris generico). Calibrado a .14:
     el .10 del brandbook esta pensado para divisores de seccion a lo ancho, y a
     1px en una grilla densa de 172px desaparece. Desvio deliberado y anotado. */
  --line: rgba(12, 59, 185, .14);
  --text: #1a1a1a;      /* Ink 900 */
  --muted: #6b6b65;     /* Ink 500 */
  --accent: #0c3bb9;    /* Believe Blue 700 */
  --signal: #00aaff;    /* Cyan 400 */
  --peligro: #b3261e;   /* solo para lo destructivo, y solo despues de pensarlo */

  /* "There is no fourth voice." Fraunces dice lo importante, Inter lo explica,
     JetBrains Mono lo cuenta. */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #050c29;      /* Believe Blue 950 */
    --card: #041d5c;    /* Believe Blue 900 */
    --line: #143080;
    --text: #fafaf7;    /* Paper 50 */
    --muted: #8ea0cf;
    --accent: #7ea2ff;
    --peligro: #ff6f61;
  }
}

/* Foco de teclado y seleccion en un solo lugar, con el color de la marca. El
   anillo azul del sistema desentona con todo lo demas. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--bg); }

/* ---- wordmark ---- */
.wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 144, 'wght' 500;
  font-size: 21px;
  letter-spacing: -0.025em;
  color: var(--accent);
  margin: 0 18px 0 0;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}
.wordmark .be { color: var(--signal); }
.wordmark .dot {
  width: .25em; height: .25em;
  margin-left: .28em;
  border-radius: 50%;
  background: var(--signal);
  align-self: center;
}

.signature { margin-top: 44px; display: flex; justify-content: flex-end; }
.signature img { height: 15px; opacity: .5; }
.sig-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .sig-light { display: none; }
  .sig-dark { display: block; }
}

* { box-sizing: border-box; }

/* Calma sobre euforia tambien es transicion: 120ms es "no me di cuenta", que es
   el punto. Y quien pidio menos movimiento, no recibe ninguno. */
button, input, textarea, select,
.item, .col-btn, .row-btn, .sp-item, .sp-badge {
  transition: color 120ms ease, background-color 120ms ease,
              border-color 120ms ease, opacity 120ms ease, outline-color 120ms ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* La marca pide el grano siempre ("the paper is brand"). El brandbook lo define al
   0.55 con multiply; en una superficie de texto de 11px eso ensucia la lectura, asi
   que aca va al 0.22. No se omite: se calibra. Solo en claro, porque el grano es papel. */
@media (prefers-color-scheme: light) {
  body::after {
    content: '';
    position: fixed; inset: 0; z-index: 9;
    pointer-events: none;
    opacity: .22;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
}

body {
  margin: 0;
  padding: 0 28px 48px;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 var(--f-body);
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--accent); min-height: 1.2em; margin: 4px 0 0; font-size: 12px; }

/* ---- topbar ---- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0 18px; position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.right { display: flex; gap: 8px; align-items: center; }
button {
  font: inherit; padding: 5px 11px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
button:hover { border-color: var(--muted); }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
input[type=search], .auth-card input, #edit-form input {
  font: inherit; padding: 5px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.status { font-size: 11px; color: var(--muted); min-width: 74px; text-align: right; }

/* ---- board ---- */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 20px 16px;
  align-items: start;
}
.column { min-width: 0; }
.col-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.col-title {
  font: 500 11px/1.4 var(--f-mono);
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--muted); flex: 1;
  border: none; background: none; padding: 2px 3px; border-radius: var(--r-sm);
  min-width: 0; cursor: grab;
}
.col-title:focus { outline: 1px solid var(--line); background: var(--card); cursor: text; }
.col-btn {
  border: none; background: none; color: var(--muted); padding: 1px 5px;
  border-radius: var(--r-sm); opacity: 0; font-size: 14px; line-height: 1;
}
.column:hover .col-btn { opacity: 1; }
.col-btn:hover { color: var(--text); border-color: var(--line); }

/* Tope de altura por columna. Sin esto, "For Review" (412 items) estira la
   pagina entera y las otras 13 columnas quedan inalcanzables: era el problema
   de uso mas grande del tablero. Cada columna scrollea sola. */
.items {
  display: flex; flex-direction: column; gap: 6px; min-height: 34px;
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.items::-webkit-scrollbar { width: 8px; }
.items::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-sm); }
.items::-webkit-scrollbar-track { background: transparent; }

.col-count {
  font: 500 10px/1 var(--f-mono);
  color: var(--muted);
  letter-spacing: .04em;
  flex: 0 0 auto;
}

/* Estado vacio: el primer arranque no puede ser una pantalla en blanco. */
.empty { grid-column: 1 / -1; padding: 72px 0 40px; text-align: center; }
.empty .eyebrow {
  font: 500 11px/1.4 var(--f-mono);
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--accent); margin: 0 0 10px;
}
.empty p { margin: 0 0 4px; }
.item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--line); 
  cursor: pointer; user-select: none; position: relative;
}
.item:hover { border-color: var(--muted); }
.item.is-new::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.item img, .item .glyph {
  width: 16px; height: 16px; flex: 0 0 16px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 11px;
}
/* La nota va como segunda linea, asi el dato que ya tenes se VE en el tablero
   en vez de vivir en un tooltip. */
.label-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .item-note {
  font-size: 11px; line-height: 1.3; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La descripcion es del sitio, no del usuario: un punto mas tenue que la nota. */
.item .item-desc {
  font-size: 11px; line-height: 1.3; color: var(--muted); opacity: .8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.active { border-color: var(--accent); color: var(--accent); }
.item.is-selected { border-color: var(--accent); background: rgba(12, 59, 185, .07); }
.item .count { font-size: 10px; color: var(--muted); }
.item .row-btn {
  border: none; background: none; color: var(--muted); opacity: 0;
  padding: 0 3px; border-radius: var(--r-sm); font-size: 12px; line-height: 1;
}
.item:hover .row-btn { opacity: 1; }
.item .row-btn:hover { color: var(--text); }

.drag-ghost { opacity: .35; }
.drag-chosen { border-color: var(--accent); }
/* .28 dejaba 660 items casi ilegibles mientras buscabas. Sigue atenuando, pero
   deja leer el contexto de alrededor. */
.dim { opacity: .45; }

/* ---- login ---- */
.auth { display: grid; place-items: center; min-height: 82vh; }
.auth-card {
  display: flex; flex-direction: column; gap: 9px; width: 268px;
  padding: 26px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line);
}
.auth-card h1 { margin: 0; font-size: 19px; }
.auth-card p { margin: 0; font-size: 12px; }
.auth-card button[type=submit] { background: var(--accent); color: #fff; border-color: transparent; padding: 7px; }

/* ---- dialog ---- */
dialog {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 20px;
  background: var(--card); color: var(--text); min-width: 330px;
}
dialog::backdrop { background: rgb(0 0 0 / .32); }
#edit-form { display: flex; flex-direction: column; gap: 11px; }
#edit-form h2 { margin: 0; font-size: 15px; }
#edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
#edit-form menu { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 0; padding: 0; }
#edit-ok, #picker-ok { background: var(--accent); color: #fff; border-color: transparent; }
#picker-ok:disabled { opacity: .45; cursor: not-allowed; }

/* ---- picker ---- */
#picker-dialog { width: min(560px, 92vw); }
#picker-form { display: flex; flex-direction: column; gap: 12px; }
#picker-form h2 { margin: 0; font-size: 15px; }
.modes { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.modes label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.modes span { display: flex; flex-direction: column; }
.modes small { color: var(--muted); font-size: 11px; }
.dest { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.dest select, .dest input {
  font: inherit; padding: 5px 9px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.picker-toolbar { display: flex; align-items: center; gap: 8px; }
.picker-toolbar .muted { margin-left: auto; font-size: 11px; }
.picker-tree {
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px;
}
.pick-group + .pick-group { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.pick-head { display: flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; }
.pick-head .muted { margin-left: auto; font-size: 11px; }
.pick-tab {
  display: flex; gap: 8px; align-items: center; cursor: pointer;
  padding: 2px 0 2px 18px; color: var(--muted);
}
.pick-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-tab:hover { color: var(--text); }

/* ---- panel de busqueda semantica ---- */
.search-panel {
  margin: 0 0 18px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.search-panel .sp-head {
  font: 500 10px/1.4 var(--f-mono);
  text-transform: uppercase; letter-spacing: .22em; color: var(--muted);
  margin: 0 0 8px; display: flex; justify-content: space-between; gap: 10px;
}
.sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 6px 5px; border-radius: var(--r-sm); cursor: pointer;
}
.sp-item:hover { outline: 1px solid var(--line); }
.sp-item.is-active { outline: 1px solid var(--accent); }
.sp-item img, .sp-item .glyph {
  width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 11px;
}
.sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-title, .sp-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-sub { font-size: 11px; color: var(--muted); }
.sp-badge {
  font: 500 9px/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 4px; white-space: nowrap;
}

/* ---- deshacer: el borrado de un item es reversible, no confirmable ----
   Un confirm en una accion frecuente molesta; un borrado sin vuelta atras en un
   tablero de 667 items es un bookmark perdido por un click al pasar. */
.undo, .selbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.undo span, .selbar span { font-size: 12px; }
.selbar select {
  font: 12px/1 var(--f-body); padding: 4px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.selbar button.danger { color: var(--accent); }
.undo button, .selbar button {
  border: none; background: none; color: var(--accent); padding: 0;
  font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em;
  cursor: pointer;
}
.undo button:hover { text-decoration: underline; }

/* ---- hit semantico: el tablero muestra que encontro el motor ---- */
.item.sem-hit { border-color: var(--accent); }
.item.sem-hit .label { color: var(--accent); }

/* La nota se muestra como segunda linea del item: ya no hace falta el punto
   indicador, que ademas era la tercera aparicion del cian. */
#edit-form textarea {
  font: inherit; padding: 5px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  resize: vertical; min-height: 42px;
}

/* ------------------------------------------------------------ vista grilla */
/* La grilla no inventa tokens: usa los mismos del tablero. Lo unico que cambia
   es como se agrupa la informacion. */

.vistas { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.vista {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 11px; border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
.vista + .vista { border-left: 1px solid var(--line); }
/* El texto del boton activo usa --bg y no blanco: en oscuro --accent es un azul
   claro, y blanco sobre azul claro no se lee. Asi se invierte solo. */
.vista.on { background: var(--accent); color: var(--bg); }

.grid { padding: 20px 28px 64px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.chip {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .03em;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--muted); cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip.on { border-color: var(--accent); color: var(--accent); }
.chip .n { color: var(--muted); margin-left: 6px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 16px; }
/* var(--card), no #fff: el sistema ya define la superficie en los dos modos, y
   en claro --card es el mismo papel — la separacion la da el hairline, no un
   relleno. Poner blanco a mano rompia el modo oscuro. */
.card {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 120ms ease-out;
}
.card:hover, .card:focus-within { border-color: var(--accent); }
.card.is-selected { border-color: var(--accent); }
/* El <a> es el que abre. Las acciones van afuera y no adentro: un <button> dentro
   de un <a> es HTML invalido y el click se comporta distinto segun el navegador. */
.card-abrir { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }

/* Acciones de la tarjeta. Aparecen al pasar el mouse Y con foco de teclado: eso
   ultimo es lo que las hace accesibles sin ensuciar la vista en reposo. */
.card-acciones {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 3px;
  opacity: 0; transition: opacity 120ms ease-out;
}
.card:hover .card-acciones, .card:focus-within .card-acciones { opacity: 1; }
.card-accion {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--muted);
  font-family: var(--f-mono); font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.card-accion:hover { border-color: var(--accent); color: var(--accent); }
.card-accion:active { background: var(--accent); color: var(--bg); }
.thumb { aspect-ratio: 16 / 10; background: var(--bg); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Cuando la pagina no declara og:image, la copia no se pudo hacer, o la imagen
   murio: el dominio en JetBrains Mono sobre el papel. Queda deliberado en vez
   de dejar el icono de imagen rota. */
.thumb.typo {
  display: flex; align-items: center; justify-content: center; padding: 12px;
  border-bottom: 1px solid var(--line);
}
.thumb.typo span {
  font-family: var(--f-mono); font-size: 14px; font-weight: 600; color: var(--accent);
  letter-spacing: -.01em; text-align: center; word-break: break-word; line-height: 1.3;
}
/* Una captura que no es un link: un archivo. No se baja el binario para hacer
   miniatura (hasta 25 MB), asi que la tarjeta dice QUE es y CUANTO pesa, que es
   exactamente lo que hace falta para decidir si abrirlo. */
.thumb.archivo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px; border-bottom: 1px solid var(--line);
}
.thumb-archivo-icono { font-size: 22px; line-height: 1; color: var(--accent); }
.thumb-archivo-nombre {
  font-family: var(--f-mono); font-size: 11px; line-height: 1.35; color: var(--text);
  text-align: center; word-break: break-all; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.thumb-archivo-peso {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .05em; color: var(--muted);
}
/* type='text': la tarjeta ES el texto. Se recorta con line-clamp y no a mano:
   el alto lo decide el aspecto del tile, no una cantidad de caracteres que
   cambie con el ancho de la columna. */
.thumb.texto {
  display: flex; align-items: flex-start; padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
}
.thumb-texto {
  font-family: var(--f-body); font-size: 12px; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; word-break: break-word; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title {
  margin: 0; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-dom {
  font-family: var(--f-mono); font-size: 10px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La etiqueta de columna va en Ink 500, NO en cian. El cian esta reservado y su
   cuota es de dos apariciones por composicion: en una grilla de cientos de
   tarjetas, pintar cada etiqueta de cian rompe la regla del sistema. */
.card-col {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%;
}
.grid-empty { font-family: var(--f-mono); font-size: 12px; color: var(--muted); padding: 40px 0; }

/* ------------------------------------------------- panel de la biblioteca */
/* El JS solo pone data-* en #grid. Todo lo visual se decide aca: un solo lugar
   para cada decision, y nada de estilos escritos a mano desde el JS. */

.right { position: relative; }
.layout-panel {
  position: absolute; top: 36px; right: 0; z-index: 20;
  width: 252px; padding: 14px 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  display: flex; flex-direction: column;
}
.lp-rotulo {
  margin: 12px 0 6px; display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.lp-rotulo:first-child { margin-top: 0; }
.lp-rotulo span { color: var(--accent); }
.lp-grupo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.lp-op {
  padding: 7px 8px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; color: var(--muted);
}
.lp-op:hover { border-color: var(--accent); color: var(--accent); }
.lp-op.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.lp-check {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
  font-size: 12px; color: var(--text); cursor: pointer;
}
.lp-check input { accent-color: var(--accent); }
#lp-cols { width: 100%; margin: 2px 0 4px; accent-color: var(--accent); }

/* ------------------------------------------------------ modos de layout */

.card-desc {
  margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.grid[data-titulo="0"] .card-title { display: none; }
.grid[data-desc="0"] .card-desc { display: none; }
.grid[data-columna="0"] .card-col { display: none; }
.grid[data-fit="contain"] .thumb img { object-fit: contain; }

/* Columnas fijas. Sin data-cols manda el auto-fill de siempre. */
.grid[data-cols="1"] .cards { grid-template-columns: minmax(0, 1fr); }
.grid[data-cols="2"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid[data-cols="3"] .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid[data-cols="4"] .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid[data-cols="5"] .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid[data-cols="6"] .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Compacta: mas tarjetas por pantalla, sin descripcion ni etiqueta. */
.grid[data-layout="compact"] .cards { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 10px; }
.grid[data-layout="compact"] .card-desc, .grid[data-layout="compact"] .card-col { display: none; }
.grid[data-layout="compact"] .card-meta { padding: 8px 9px 9px; gap: 5px; }
.grid[data-layout="compact"] .card-title { font-size: 12px; -webkit-line-clamp: 3; }
.grid[data-layout="compact"] .card-accion { width: 22px; height: 22px; font-size: 11px; }
/* En Compacta la tarjeta es tan angosta que cinco botones no entran. Los dos que
   se van (copiar y seleccionar) estan en el detalle. */
.grid[data-layout="compact"] .acc-copiar, .grid[data-layout="compact"] .acc-sel { display: none; }

/* Lista: una fila por item, miniatura chica. Es el modo de leer. */
.grid[data-layout="list"] .cards { grid-template-columns: minmax(0, 1fr); gap: 0; }
.grid[data-layout="list"] .card {
  flex-direction: row; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; background: transparent;
}
.grid[data-layout="list"] .card:hover { background: var(--card); }
.grid[data-layout="list"] .card.is-selected { border-left: 2px solid var(--accent); background: var(--card); }
.grid[data-layout="list"] .card-abrir {
  flex-direction: row; align-items: flex-start; gap: 14px; padding: 12px 6px;
}
.grid[data-layout="list"] .thumb {
  flex: 0 0 84px; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.grid[data-layout="list"] .thumb.typo span { font-size: 10px; }
.grid[data-layout="list"] .card-meta { padding: 0; gap: 5px; }
.grid[data-layout="list"] .card-title { font-size: 13.5px; -webkit-line-clamp: 1; }
.grid[data-layout="list"] .card-desc { -webkit-line-clamp: 2; max-width: 78ch; }
.grid[data-layout="list"] .card-acciones { top: 14px; }

/* Masonry: alto natural de cada imagen, en columnas CSS. */
.grid[data-layout="masonry"] .cards { display: block; columns: 240px; column-gap: 16px; }
.grid[data-layout="masonry"] .card { display: inline-flex; width: 100%; margin: 0 0 16px; break-inside: avoid; }
.grid[data-layout="masonry"] .thumb { aspect-ratio: auto; }
.grid[data-layout="masonry"] .thumb img { height: auto; }
.grid[data-layout="masonry"][data-cols="1"] .cards { columns: 1; }
.grid[data-layout="masonry"][data-cols="2"] .cards { columns: 2; }
.grid[data-layout="masonry"][data-cols="3"] .cards { columns: 3; }
.grid[data-layout="masonry"][data-cols="4"] .cards { columns: 4; }
.grid[data-layout="masonry"][data-cols="5"] .cards { columns: 5; }
.grid[data-layout="masonry"][data-cols="6"] .cards { columns: 6; }

/* ------------------------------------------------------------ vista detalle */
/* Panel lateral, no dialogo: se puede seguir recorriendo la grilla con el
   detalle abierto, y eso es lo que lo hace util para leer. */

.detalle {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
  width: min(580px, 48vw);
  display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line);
  animation: det-entra 170ms cubic-bezier(.2, .7, .3, 1);
}
/* Entra deslizando un pelo. Aparecer de golpe se siente barato. */
@keyframes det-entra { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .detalle { animation: none; } }

.det-cab {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.det-cuenta { font-family: var(--f-mono); font-size: 10px; letter-spacing: .09em; color: var(--muted); }
.det-nav { display: flex; gap: 4px; }
.det-nav button {
  width: 28px; height: 28px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent;
  color: var(--muted); font-family: var(--f-mono); font-size: 13px; line-height: 1;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}
.det-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--card); }
.det-nav button:disabled { opacity: .3; cursor: default; }

.det-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 20px 20px 56px; }

/* Barra de scroll fina y del tono de la marca. La del sistema rompe el clima. */
.det-cuerpo, .det-extracto { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.det-cuerpo::-webkit-scrollbar, .det-extracto::-webkit-scrollbar { width: 10px; }
.det-cuerpo::-webkit-scrollbar-track, .det-extracto::-webkit-scrollbar-track { background: transparent; }
.det-cuerpo::-webkit-scrollbar-thumb, .det-extracto::-webkit-scrollbar-thumb {
  background: var(--line); border: 3px solid transparent; background-clip: padding-box;
}
.det-cuerpo::-webkit-scrollbar-thumb:hover, .det-extracto::-webkit-scrollbar-thumb:hover {
  background: var(--accent); background-clip: padding-box;
}
.det-thumb { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
.det-thumb img { width: 100%; max-height: 340px; object-fit: cover; object-position: top center; display: block; }
/* Una foto capturada se ve completa; una preview de pagina se recorta porque lo
   que importa es el encabezado del sitio, no el pie. */
.det-thumb.imagen img { object-fit: contain; object-position: center; background: var(--bg); }
.det-thumb.typo {
  display: flex; align-items: center; justify-content: center;
  min-height: 128px; padding: 20px; background: var(--card);
}
.det-thumb.typo span {
  font-family: var(--f-mono); font-size: 19px; font-weight: 600;
  color: var(--accent); text-align: center; word-break: break-word;
}
/* El detalle de un archivo: la misma composicion que la tarjeta, mas grande. */
.det-thumb.archivo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 128px; padding: 20px;
}
.det-thumb.archivo .thumb-archivo-icono { font-size: 30px; }
.det-thumb.archivo .thumb-archivo-nombre { font-size: 14px; }
.det-titulo {
  margin: 18px 0 0; font-family: var(--f-display); font-size: 22px; font-weight: 500;
  line-height: 1.26; letter-spacing: -.02em; color: var(--text);
}
.det-meta {
  margin-top: 10px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .02em;
  color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.det-meta .sep { opacity: .45; }
.det-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.det-accion {
  padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}
.det-accion:hover { border-color: var(--accent); color: var(--accent); }
.det-accion.principal { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.det-accion.principal:hover { opacity: .88; }
/* El peligro tiene que leerse ANTES de apretarlo. En reposo era identico a los
   otros cuatro: solo se distinguia pasando por encima, que es tarde. */
.det-accion.peligro {
  border-color: color-mix(in srgb, var(--peligro) 34%, transparent);
  color: var(--peligro);
}
.det-accion.peligro:hover {
  border-color: var(--peligro); color: var(--peligro);
  background: color-mix(in srgb, var(--peligro) 8%, transparent);
}

.det-bloque { margin-top: 26px; }
.det-rotulo {
  margin: 0 0 9px; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.det-texto { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text); }
/* El extracto es para LEER: medida corta, interlineado generoso y aire entre
   parrafos. Antes era un bloque corrido sin estructura. */
.det-extracto {
  max-height: 46vh; overflow-y: auto; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.det-extracto p {
  margin: 0 0 0.95em; max-width: 64ch;
  font-size: 14px; line-height: 1.78; color: var(--text);
}
.det-extracto p:last-child { margin-bottom: 0; }
.det-nota {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 74px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--text);
  font-family: var(--f-body); font-size: 13px; line-height: 1.5;
}
.det-nota:focus { outline: none; border-color: var(--accent); }
.det-pie { font-family: var(--f-mono); font-size: 10px; color: var(--muted); margin-top: 6px; }
/* Descarga de un binario. Es un <a> y no un boton: tiene que poder guardarse
   con click derecho y mostrar el destino al pasar el mouse. */
.det-descarga {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--text); text-decoration: none;
  font-family: var(--f-mono); font-size: 12px;
}
.det-descarga:hover { border-color: var(--accent); color: var(--accent); }
.det-descarga-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.det-descarga-peso { font-size: 10px; color: var(--muted); white-space: nowrap; }
.det-descarga:hover .det-descarga-peso { color: inherit; }
/* Un texto capturado no es una nota al margen: se lee completo y se le da aire. */
.det-nota-texto { min-height: 150px; }
/* El mismo contenido que el extracto, pero sin tope de alto: si el texto es el
   item, esconder la mitad en un scroll de 46vh no es mostrarlo. */
.det-texto-plano { max-height: none; }

/* -------------------------------------------------------------------- tags */
/* La columna tags text[] existia desde el principio en 0: ahora tiene quien la
   escriba y quien la lea. */

.chips-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 5px; }

.det-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .03em; color: var(--text);
  transition: border-color 120ms ease;
}
.tag:hover { border-color: var(--accent); }
.tag-x {
  padding: 0 3px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-family: var(--f-mono); font-size: 12px; line-height: 1;
  transition: color 120ms ease;
}
.tag-x:hover { color: var(--peligro); }
.tag-nuevo {
  min-width: 128px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent;
  color: var(--text); font-family: var(--f-mono); font-size: 10px;
}
.tag-nuevo:focus { outline: none; border-color: var(--accent); }
.tag-nuevo::placeholder { color: var(--muted); }

/* ----------------------------------------------------------------- resumen */
/* El resumen es lo UNICO en pantalla que no lo escribio la pagina ni vos. Se
   marca con el filo cian, y ese es el mejor uso posible de la segunda
   aparicion de Cyan 400 que permite la marca: el wordmark ya usa una, y esto
   senaliza exactamente lo que tiene que senalizar — que ese texto lo genero una
   maquina y conviene leerlo con esa info. */
.det-resumen .det-accion { margin-top: 2px; }
.det-bloque:has(.det-resumen) .det-rotulo { color: var(--signal); }
.det-resumen .det-texto {
  padding-left: 13px; border-left: 2px solid var(--signal);
  font-size: 14px; line-height: 1.7;
}
.det-resumen.cargando {
  padding: 3px 0 3px 13px; border-left: 2px solid var(--line);
  font-family: var(--f-mono); font-size: 11px; color: var(--muted);
  animation: latido 1.7s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .det-resumen.cargando { animation: none; } }

/* Ordenar: tres opciones, pero el grupo de arriba es una grilla de DOS columnas
   y la tercera dejaba un hueco. Va la principal a lo ancho y las dos de fecha
   abajo, que ademas dice cual manda. */
.lp-grupo-orden { display: flex; flex-wrap: wrap; gap: 4px; }
.lp-op.ancho { flex: 1 1 100%; }

/* ------------------------------------------- filtro de etiquetas (dropdown) */
/* Una pill por etiqueta no escala: ocupa un renglon cada pocas y empuja la
   grilla. El desplegable ocupa siempre lo mismo. */
.chips-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.chips-fila .chips { margin-bottom: 0; }
.filtro-tag { position: relative; }
.chip .caret { margin-left: 6px; opacity: .65; }
.chip.on { border-color: var(--accent); color: var(--accent); }
.chip:disabled { opacity: .45; cursor: default; }
.tag-panel {
  position: absolute; top: 30px; left: 0; z-index: 25;
  min-width: 230px; max-height: 320px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  display: flex; flex-direction: column;
}
.tp-op {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 7px 9px; cursor: pointer; text-align: left; width: 100%;
  border: 0; border-radius: var(--r-sm); background: transparent;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .03em; color: var(--text);
}
.tp-op:hover { background: var(--bg); color: var(--accent); }
.tp-op.on { background: var(--accent); color: var(--bg); }
.tp-op.on .tp-n { color: var(--bg); opacity: .7; }
.tp-n { font-size: 9.5px; color: var(--muted); }
.tp-quitar {
  color: var(--peligro); border-radius: 0; margin-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.tp-vacio { margin: 0; padding: 8px 9px; font-family: var(--f-mono); font-size: 10px; color: var(--muted); }

/* El desplegable vive en la barra de arriba. Ahi el chip tiene que medir lo
   mismo que los otros controles de .right. */
.right .filtro-tag { position: relative; }
.right .chip { padding: 7px 11px; font-size: 11px; color: var(--text); }
.right .tag-panel { top: 34px; left: auto; right: 0; }

/* El aviso de que las etiquetas vienen en camino. Va en el flujo del bloque de
   tags, asi que tiene que empujar al input y no superponerse. */
.tag-espera { flex: 1 1 100%; margin: 0 0 2px; }


/* ===========================================================================
   CAPA DE PROFUNDIDAD — direccion visual nueva
   ---------------------------------------------------------------------------
   Reemplaza el cuadrado editorial por profundidad: glow ambiental, superficies
   translucidas, radios generosos y pills redondas.

   Va al FINAL a proposito: mismas especificidades, gana por orden. No se toca
   una sola regla de layout ni de logica, asi que el comportamiento no cambia.

   El glow NO vive en el header: es una capa fija que cubre toda la ventana, para
   que las tarjetas de abajo tambien esten iluminadas. En la primera maqueta
   estaba solo arriba y a media pantalla la magia se acababa.
   =========================================================================== */

:root {
  --r-sm: 12px;
  --r-md: 18px;
  --r-pill: 999px;
  --glow: rgba(124, 155, 255, .5);
}

/* --- paleta oscura: OLED azulado, no el navy plano de antes --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #05070f;
    --card: rgba(255, 255, 255, .035);
    --line: rgba(255, 255, 255, .075);
    --text: #eef1fb;
    --muted: #8d97b8;
    --accent: #7c9bff;
    --signal: #4ee0ff;
  }
}

/* --- el glow de fondo --- */
body { position: relative; }
body::before {
  /* inset: 0 y NO -25%: con el recuadro al 150% del viewport los gradientes en
     porcentaje caian casi todos FUERA de la pantalla y el glow no se veia. */
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 38% at 14% 6%,  rgba(92, 106, 246, .28), transparent 62%),
    radial-gradient(46% 34% at 88% 10%, rgba(78, 224, 255, .15), transparent 60%),
    radial-gradient(60% 46% at 78% 92%, rgba(150, 90, 255, .18), transparent 64%),
    radial-gradient(48% 40% at 26% 88%, rgba(46, 170, 255, .12), transparent 62%);
  filter: blur(4px);
}
@media (prefers-color-scheme: light) {
  body::before {
    background:
      radial-gradient(52% 38% at 12% 4%,  rgba(12, 59, 185, .10), transparent 62%),
      radial-gradient(46% 34% at 88% 8%,  rgba(0, 170, 255, .10), transparent 60%),
      radial-gradient(60% 46% at 76% 92%, rgba(120, 80, 255, .07), transparent 64%);
  }
}
/* SOLO los que ya son estaticos. NUNCA .detalle ni .layout-panel: uno es
   position: fixed y el otro absolute, y ponerlos en relative los devuelve al
   flujo. El panel de Layout quedaba adentro de .right, en flujo, y agrandaba la
   barra a media pantalla. Ese era el "layout roto", no la barra. */
main, .topbar, .grid, .board { position: relative; z-index: 1; }

/* Quedaba como un MARCO CUADRADO flotando: translucida si, pero con las cuatro
   esquinas rectas contra un fondo con glow, que es lo que mas canta. Ahora es
   una barra flotante redondeada, del mismo lenguaje que los chips y las
   tarjetas. Y sigue translucida, asi que el glow se ve por debajo. */
/* Barra flotante redondeada, con el glow viendose por debajo.
   OJO: esto NO era lo que rompia el layout. El culpable era el "position:
   relative" que le puse a .layout-panel (y a .detalle), que los devolvia al
   flujo. Sin eso, la barra puede flotar sin problema. */
.topbar {
  position: sticky; top: 10px;
  margin: 10px 0 18px; padding: 10px 18px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .05) inset;
  z-index: 5;
}
@media (prefers-color-scheme: light) {
  .topbar { background: color-mix(in srgb, var(--bg) 80%, transparent); }
}

/* --- wordmark: Fraunces vuelve a ser la unica voz propia --- */
.wordmark { font-size: 20px; letter-spacing: -.025em; }

/* --- botones y chips: redondos, translucidos --- */
/* En pantalla chica el tablero no existe como opcion: es un kanban que se
   ordena arrastrando con mouse. Se oculta el conmutador en vez de ofrecer algo
   que no funciona. */
@media (max-width: 720px) {
  .vistas { display: none; }

  /* .right NO tenia flex-wrap: en pantalla angosta sus hijos (layout, etiquetas,
     buscador de 180px, salir) no podian bajar y se salian a la derecha. Ese era
     el overflow: solo se veian ~305px del ancho. */
  .right { flex-wrap: wrap; width: 100%; justify-content: flex-end; }
  #search { flex: 1 1 100%; width: auto; min-width: 0; }

  /* Menos aire lateral: 28px por lado en 390px de pantalla es un sexto. */
  body { padding: 0 14px 32px; }
  .topbar { padding: 10px 12px; gap: 10px; }
  .tools { gap: 6px; }

  /* Tarjetas mas chicas para que entren dos, no una gigante. */
  .cards { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }

  /* El detalle ocupa toda la pantalla; el panel no se sale. */
  .detalle { width: 100vw; border-radius: 0; }
  .layout-panel, .tag-panel { width: auto; max-width: calc(100vw - 32px); }

  .card-desc { -webkit-line-clamp: 2; }

  /* Red de seguridad contra el overflow horizontal. Sin sesion no puedo ver la
     grilla en 390px, asi que ademas de arreglar las causas conocidas se acota
     todo lo que puede empujar el ancho: nada debe exceder la pantalla. */
  html, body { max-width: 100%; overflow-x: hidden; }
  .topbar, .tools, .right, .chips, .grid, .cards, #selbar, #undo, #grid-empty { max-width: 100%; }
  img, svg, video, canvas { max-width: 100%; height: auto; }
  .card, .card-abrir, .card-meta { min-width: 0; }
  .card-title { overflow-wrap: anywhere; }
}

.chip, .ghost, .lp-op, .det-accion, .vista, .filtro-tag .chip {
  border-radius: var(--r-pill);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: color .22s ease, border-color .22s ease, background-color .22s ease,
              box-shadow .22s ease, transform .22s ease;
}
.chip:hover, .ghost:hover, .lp-op:hover, .det-accion:hover, .vista:hover {
  box-shadow: 0 10px 30px -14px var(--glow);
}
.chip.on, .vista.on, .lp-op.on {
  background: linear-gradient(140deg, rgba(124, 155, 255, .92), rgba(78, 224, 255, .78));
  border-color: transparent; color: #04101f; font-weight: 600;
  box-shadow: 0 14px 40px -12px rgba(110, 170, 255, .9);
}
.det-accion.principal {
  background: linear-gradient(140deg, #7c9bff, #5a7bff); border-color: transparent;
  color: #04101f; box-shadow: 0 12px 34px -12px rgba(124, 155, 255, .9);
}

/* --- tarjetas: translucidas, elevadas, con glow al pasar --- */
.card {
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 28px 70px -32px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .06) inset;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), box-shadow .34s ease, border-color .34s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 155, 255, .34);
  box-shadow: 0 44px 96px -32px rgba(0, 0, 0, 1), 0 0 0 1px rgba(124, 155, 255, .18),
              0 0 70px -22px rgba(124, 155, 255, .5), 0 1px 0 rgba(255, 255, 255, .09) inset;
}
.thumb { border-radius: 0; }

/* --- paneles y detalle: misma familia, mas aire --- */
.layout-panel, .tag-panel, .detalle, #search-panel {
  border-radius: var(--r-md);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 1), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
/* Los paneles flotantes necesitan fondo PROPIO y casi opaco.
   --card ahora es translucido (es el fondo de las tarjetas), y usarlo aca los
   dejaba transparentes: se veia la grilla a traves del panel de Layout. */
@media (prefers-color-scheme: dark) {
  .layout-panel, .tag-panel, #search-panel { background: #0b1224; }
}
@media (prefers-color-scheme: light) {
  .layout-panel, .tag-panel, #search-panel { background: #ffffff; }
}
.detalle { border-radius: var(--r-md) 0 0 var(--r-md); }
.det-thumb, .tag, .det-nota, .det-extracto { border-radius: var(--r-sm); }
.tag { border-radius: var(--r-pill); padding-left: 12px; }
.tag-nuevo { border-radius: var(--r-pill); }
.tag-panel .tp-op { border-radius: var(--r-sm); }

/* --- el detalle respira un poco mas --- */
.det-titulo { font-family: var(--f-display); letter-spacing: -.025em; }
.det-extracto p { letter-spacing: .004em; }

@media (prefers-reduced-motion: reduce) {
  .card, .card:hover { transform: none; }
}

/* El icono entra en la marca: la carpeta de cristal antes de "BeTabs". */
/* Flex y no vertical-align: con Fraunces el icono quedaba visiblemente mas
   alto que el texto, por mas que se ajustara el pixel de alineacion. Con
   inline-flex se centran de verdad, y el punto cian sigue pegado a "Tabs". */
.wordmark {
  display: inline-flex; align-items: center;
}
.wordmark .marca {
  width: 30px; height: 30px; border-radius: 9px;
  margin-right: 11px; flex: 0 0 auto;
  /* Halo azul: el icono es cristal oscuro y sobre el fondo del navbar se perdia.
     Una luz del mismo azul detras lo despega sin dibujarle un borde duro. */
  box-shadow:
    0 0 0 1px rgba(150, 195, 255, .22),
    0 0 26px -2px rgba(40, 140, 255, .85),
    0 0 60px -10px rgba(60, 170, 255, .55),
    0 8px 22px -8px rgba(0, 0, 0, .95);
}
.auth-card .wordmark .marca { width: 44px; height: 44px; border-radius: 13px; vertical-align: -11px; }
@media (max-width: 720px) {
  .wordmark .marca { width: 24px; height: 24px; border-radius: 7px; margin-right: 8px; vertical-align: -5px; }
}