/* ============================================================
   LA MESA DE ESTUDIO — estilos (workspace.css)
   Burbuja de selección, hoja de captura, calculadora, visor de
   mapas y Mi Mesa (/desk). Mobile-first: todo funciona a 320px.
   ============================================================ */

:root {
    --ws-yellow: #fff3b0;
    --ws-green: #d3f4d5;
    --ws-blue: #cfe6ff;
    --ws-pink: #ffd6e8;
    --ws-orange: #ffe2c4;
    --ws-purple: #e6d9ff;
}

/* Sin scroll bajo hojas/modales */
body.ws-lock { overflow: hidden; }

/* ── Burbuja de selección (fichas de OA) ───────────────────── */
.ws-bubble {
    position: absolute; z-index: 900; display: flex; gap: 4px;
    padding: 5px 6px; background: var(--ink, #23190f); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28); animation: ws-pop .12s ease-out;
}
.ws-bubble button {
    border: 0; background: transparent; color: var(--surface, #fff8ef); font: inherit; font-size: 13px;
    padding: 4px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.ws-bubble button:hover, .ws-bubble button:focus-visible { background: rgba(255, 255, 255, .16); outline: none; }
@keyframes ws-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* Lector: los botones inyectados se parean con los de su toolbar nativa */
.selection-toolbar #ws-postit-selection, .selection-toolbar #ws-clip-selection { font: inherit; }

/* ── Hoja rápida de captura ────────────────────────────────── */
.ws-sheet-wrap { position: fixed; inset: 0; z-index: 950; display: flex; align-items: flex-end; justify-content: center; }
.ws-sheet-scrim { position: absolute; inset: 0; background: rgba(20, 14, 6, .45); }
.ws-sheet {
    position: relative; width: min(560px, 100%); background: var(--surface, #fffdf6);
    border-radius: 16px 16px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); display: grid; gap: 10px;
}
@media (min-width: 640px) {
    .ws-sheet-wrap { align-items: center; }
    .ws-sheet { border-radius: 16px; }
}
.ws-sheet header { display: flex; align-items: center; justify-content: space-between; }
.ws-sheet-kind { font-size: 16px; }
.ws-sheet-src { font-size: 13px; color: var(--muted, #7a6a55); background: #0000000a; border-radius: 8px; padding: 6px 9px; }
.ws-sheet-quote span { display: block; font-size: 12px; color: var(--muted, #7a6a55); margin-bottom: 2px; }
.ws-sheet-quote-text {
    border-left: 3px solid var(--line, #e4d9c8); padding: 4px 10px; font-style: italic;
    max-height: 110px; overflow: auto; font-size: 14px;
}
.ws-sheet label { display: grid; gap: 4px; font-size: 13px; color: var(--muted, #7a6a55); }
.ws-sheet textarea {
    width: 100%; resize: vertical; font: inherit; padding: 10px 12px;
    border: 1px solid var(--line, #e4d9c8); border-radius: 10px;
    background: var(--bg, #fff); color: var(--ink, #23190f);
}
.ws-sheet textarea::placeholder { color: var(--muted, #7a6a55); }
.ws-sheet textarea:focus { outline: 2px solid var(--brand, #e07a1f); outline-offset: 1px; }
.ws-sheet-colors { display: flex; gap: 8px; }
.ws-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.ws-dot.on { border-color: var(--ink, #23190f); transform: scale(1.12); }
.ws-dot-yellow { background: var(--ws-yellow); } .ws-dot-green { background: var(--ws-green); }
.ws-dot-blue { background: var(--ws-blue); } .ws-dot-pink { background: var(--ws-pink); }
.ws-dot-orange { background: var(--ws-orange); } .ws-dot-purple { background: var(--ws-purple); }
.ws-sheet footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Calculadora (cajón inferior) ──────────────────────────── */
.ws-calc-wrap { position: fixed; inset: 0; z-index: 960; display: flex; align-items: flex-end; justify-content: center; }
.ws-calc-scrim { position: absolute; inset: 0; background: rgba(20, 14, 6, .45); }
.ws-calc {
    position: relative; width: min(520px, 100%); background: var(--surface, #fffdf6);
    border-radius: 16px 16px 0 0; padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); display: grid; gap: 8px;
}
@media (min-width: 640px) { .ws-calc-wrap { align-items: center; } .ws-calc { border-radius: 16px; } }
.ws-calc header { display: flex; justify-content: space-between; align-items: center; }
.ws-calc-out {
    display: block; min-height: 26px; padding: 8px 10px; border-radius: 9px; background: #0000000a;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere; font-size: 15px;
}
.ws-calc-expr {
    width: 100%; font: inherit; font-size: 17px; padding: 9px 11px;
    border: 1px solid var(--line, #e4d9c8); border-radius: 10px;
    background: var(--bg, #fff); color: var(--ink, #23190f);
}
.ws-calc-pad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ws-calc-pad button {
    padding: 10px 0; font-size: 16px; border: 1px solid var(--line, #e4d9c8);
    border-radius: 9px; background: var(--bg, #fff); color: var(--ink, #23190f); cursor: pointer;
}
.ws-calc-pad button:active { background: #0000000d; }
.ws-calc-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ws-calc-history { display: flex; flex-direction: column; gap: 2px; max-height: 132px; overflow: auto; }
.ws-calc-history button {
    border: 0; background: none; text-align: left; font: inherit; font-size: 13px;
    color: var(--muted, #7a6a55); padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.ws-calc-history button:hover { background: #0000000a; color: inherit; }

/* ── Visor de mapas ────────────────────────────────────────── */
.ws-map-modal { position: fixed; inset: 0; z-index: 970; background: rgba(20, 14, 6, .55); display: flex; align-items: center; justify-content: center; padding: 10px; }
.ws-map-box {
    width: min(900px, 100%); height: min(640px, 92dvh); background: var(--surface, #fffdf6);
    border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
}
.ws-map-box header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line, #e4d9c8); }
.ws-map-box header strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-map-canvas { flex: 1; min-height: 0; }

/* ── MI MESA (/desk) — sección de elementos personales ─────── */
.ws-capture { display: flex; gap: 8px; margin: 12px 0 18px; }
.ws-capture input {
    flex: 1; min-width: 0; font: inherit; padding: 11px 14px;
    border: 1px solid var(--line, #e4d9c8); border-radius: 999px;
    background: var(--bg, #fff); color: var(--ink, #23190f);
}
.ws-capture input:focus { outline: 2px solid var(--brand, #e07a1f); outline-offset: 1px; }

.ws-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ws-tab {
    border: 1px solid var(--line, #e4d9c8); background: var(--bg, #fff); color: var(--ink, #23190f); border-radius: 999px;
    padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.ws-tab.on { background: var(--ink, #23190f); color: var(--surface, #fff8ef); border-color: transparent; }
.ws-tab .n { opacity: .65; margin-inline-start: 4px; }

/* Mesa LIBRE (§ estructura no forzada): columnas tipo masonry, cada elemento con su carácter —
   el post-it es papel pegado (ligeramente girado), la nota es hoja de cuaderno, el recorte es
   cita, el cálculo es consola, el mapa ocupa fila propia. Nada de fichas uniformes. */
.ws-grid { columns: 3 240px; column-gap: 12px; }
@media (max-width: 640px) { .ws-grid { columns: 2 160px; } }
@media (max-width: 360px) { .ws-grid { columns: 1; } }

.ws-card {
    position: relative; border-radius: 12px; padding: 12px 12px 34px; min-width: 0; margin: 0 0 12px;
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    background: var(--ws-yellow); color: #3a2d16; box-shadow: 0 2px 10px rgba(35, 25, 15, .08);
    display: flex; flex-direction: column; gap: 6px; border: 0;
}
/* Post-it: papel adhesivo, giros mínimos alternados (sólo el primer hijo por columna para no marear) */
.ws-card-postit { transform: rotate(-.6deg); }
.ws-card-postit:nth-child(3n+2) { transform: rotate(.7deg); }
.ws-card-postit::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 6px; background: #00000010; border-radius: 0 0 6px 6px; } /* sombra del adhesivo */
/* Nota: hoja de cuaderno en papel claro */
.ws-card-note { background: var(--surface, #fffdf6); border: 1px solid var(--line, #e4d9c8); border-radius: 4px; }
/* Recorte: cita con margen tipo tijera */
.ws-card-clip { background: #fbf6ec; border: 1px dashed #c9b896; }
/* Pendiente: línea, no tarjeta cuadrada */
.ws-card-task { background: var(--surface, #fffdf6); border: 1px solid var(--line, #e4d9c8); border-radius: 10px; }
/* Cálculo: consola monoespaciada */
.ws-card-calculation { background: #241d13; color: #f5ead6; }
.ws-card-calculation code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
/* Mapa: anchura completa, es otra cosa */
.ws-card-mindmap { background: var(--surface, #fffdf6); border: 1px solid var(--line, #e4d9c8); break-inside: auto; }
/* Colores: sólo adhesivos (post-it y pendiente) — nota/recorte/cálculo/mapa mantienen su papel */
.ws-card-postit[data-color="green"], .ws-card-task[data-color="green"] { background: var(--ws-green); }
.ws-card-postit[data-color="blue"], .ws-card-task[data-color="blue"] { background: var(--ws-blue); }
.ws-card-postit[data-color="pink"], .ws-card-task[data-color="pink"] { background: var(--ws-pink); }
.ws-card-postit[data-color="orange"], .ws-card-task[data-color="orange"] { background: var(--ws-orange); }
.ws-card-postit[data-color="purple"], .ws-card-task[data-color="purple"] { background: var(--ws-purple); }
.ws-card h3 { font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.ws-card .ws-type { position: absolute; top: -8px; left: 10px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; background: #00000014; border-radius: 6px; padding: 1px 6px; }
.ws-card p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ws-card blockquote { margin: 0; font-size: 13px; font-style: italic; border-left: 3px solid #00000022; padding-left: 8px; }
.ws-card .ws-src { font-size: 12px; color: #00000088; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.ws-card .ws-src:hover { text-decoration: underline; }
.ws-card .ws-when { font-size: 11px; color: #00000066; }
.ws-card-menu { position: absolute; right: 8px; bottom: 6px; display: flex; gap: 2px; }
.ws-card-menu button {
    border: 0; background: #0000000d; border-radius: 7px; font-size: 12px; padding: 3px 7px; cursor: pointer; color: inherit;
}
.ws-card-menu button:hover { background: #0000001f; }
.ws-card.is-pinned::after { content: '📌'; position: absolute; top: 6px; right: 8px; font-size: 13px; }
.ws-task-line { display: flex; align-items: baseline; gap: 8px; }
.ws-task-line input { width: 17px; height: 17px; flex: none; }
.ws-done .ws-text { text-decoration: line-through; opacity: .6; }

.ws-editor textarea { width: 100%; min-height: 160px; font: inherit; padding: 10px; border-radius: 10px; border: 1px solid var(--line, #e4d9c8); }
.ws-editor .ws-save-state { font-size: 12px; color: var(--muted, #7a6a55); }

.ws-load-more { display: block; margin: 14px auto 0; }
.ws-empty-card { opacity: .8; }
.ws-flash { animation: ws-flash 1.2s ease-out; }
@keyframes ws-flash { 0% { box-shadow: 0 0 0 3px var(--brand, #e07a1f); } 100% { box-shadow: 0 2px 10px rgba(35, 25, 15, .08); } }

/* Accesibilidad: foco visible y respeto a menos movimiento */
.ws-bubble button:focus-visible, .ws-sheet .ws-dot:focus-visible, .ws-card-menu button:focus-visible,
.ws-tab:focus-visible, .ws-capture input:focus-visible { outline: 2px solid var(--brand, #e07a1f); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .ws-bubble, .ws-card { animation: none; transition: none; }
    .ws-card-postit, .ws-card-postit:nth-child(3n+2) { transform: none; }
}

/* ── Botón flotante de captura (todo el sitio, con sesión) ─── */
/* Pegado al BORDE IZQUIERDO a media pantalla: así no pisa al asistente Clippy (abajo-izquierda)
   ni el botón «subir» ni los chips de la Brújula (abajo-derecha). Forma de pestaña. */
.ws-fab {
    position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 74;
    width: 46px; height: 54px; border: 0; cursor: pointer;
    border-radius: 0 14px 14px 0;
    background: var(--brand, #e07a1f); color: #fff; display: grid; place-items: center;
    box-shadow: 2px 3px 12px rgba(35, 25, 15, .26);
}
.ws-fab:hover { filter: brightness(1.08); width: 52px; }
.ws-fab:focus-visible { outline: 2px solid var(--brand, #e07a1f); outline-offset: 3px; }
@media (max-width: 640px) { .ws-fab { width: 40px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .ws-fab:hover { width: 46px; } }
/* La portada no es una pantalla de trabajo: no hay texto que capturar todavía, así que el único
   flotante «+» del sitio se apaga ahí (regla del 2026-10-03, §8 «eliminar ruido visual»). */
body.page-home .ws-fab { display: none; }

/* Pestañas libres dentro de la hoja de captura */
.ws-sheet-tabs { display: flex; gap: 6px; margin: 8px 0 2px; }
.ws-sheet-tab { border: 1px solid var(--line, #e4d9c8); background: transparent; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.ws-sheet-tab.on { background: var(--ink, #23190f); color: var(--surface, #fff8ef); border-color: transparent; }
.ws-sheet-tab:focus-visible { outline: 2px solid var(--brand, #e07a1f); outline-offset: 2px; }

/* ============================================================
   MI MESA (/desk) — página pura, sin KPIs (§3/§10). Los seis tipos
   internos son «materiales» con presentaciones distintas, no seis apps.
   ============================================================ */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mesa-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.mesa-header h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); }
.mesa-header p { margin: 0; }
.mesa-count { font-size: 13px; white-space: nowrap; }

/* Barra superior: + Añadir, Buscar, Montones, vista (§10) */
.mesa-topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.mesa-add { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; }
.mesa-add input {
    flex: 1; min-width: 0; font: inherit; padding: 10px 14px;
    border: 1px solid var(--line, #e4d9c8); border-radius: 999px; background: var(--surface, #fff);
}
.mesa-add input:focus { outline: 2px solid var(--brand, #e07a1f); outline-offset: 1px; }
.mesa-add-btn { white-space: nowrap; }
.mesa-tools { display: flex; align-items: center; gap: 6px; }
.mesa-view { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line, #e4d9c8); border-radius: 999px; background: var(--surface, #fff); cursor: pointer; }
.mesa-search { margin: -4px 0 12px; }
.mesa-search input { width: 100%; font: inherit; padding: 10px 14px; border: 1px solid var(--line, #e4d9c8); border-radius: 12px; }
.mesa-search input:focus { outline: 2px solid var(--brand, #e07a1f); outline-offset: 1px; }

.mesa-block { margin: 14px 0; }
.mesa-block-title { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #7a6a55); margin: 6px 0 8px; font-weight: 600; }

/* Continuar trabajando (§10): sólo materiales personales, no «continuar leyendo» */
.mesa-continue { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mesa-continue-item {
    display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; min-width: 140px;
    border: 1px solid var(--line, #e4d9c8); border-radius: 12px; background: var(--surface, #fffdf6);
    text-decoration: none; color: inherit; cursor: pointer;
}
.mesa-continue-item:hover { border-color: var(--brand, #e07a1f); }
.mesa-continue-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.mesa-continue-item strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* Montones (§11) */
.mesa-piles { margin: 4px 0 16px; }
.mesa-piles-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mesa-pile-chip {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line, #e4d9c8); background: var(--surface, #fff); border-radius: 999px;
    padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer;
}
.mesa-pile-chip.on { background: var(--ink, #23190f); color: var(--surface, #fff8ef); border-color: transparent; }
.mesa-pile-chip .n { opacity: .6; font-size: 12px; }
.mesa-pile-x { margin-left: 2px; opacity: .5; border-radius: 50%; padding: 0 3px; }
.mesa-pile-x:hover { opacity: 1; }
.mesa-pile-new { display: inline-flex; gap: 4px; align-items: center; }
.mesa-pile-new input { font: inherit; font-size: 13px; padding: 5px 10px; border: 1px dashed var(--line, #e4d9c8); border-radius: 999px; width: 150px; }

/* «Mover a…» (§24): alternativa accesible al arrastre */
.mesa-move-menu {
    position: fixed; z-index: 980; min-width: 190px; padding: 6px;
    background: var(--surface, #fffdf6); border: 1px solid var(--line, #e4d9c8); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(35, 25, 15, .18); display: flex; flex-direction: column;
}
.mesa-move-menu button { border: 0; background: none; text-align: left; font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.mesa-move-menu button:hover { background: #0000000d; }
.mesa-move-menu button.on { color: var(--brand, #e07a1f); font-weight: 600; }

/* Estado vacío (§27): invitador, no error */
.mesa-empty { text-align: center; padding: 34px 18px; border: 1px dashed var(--line, #e4d9c8); border-radius: 16px; background: var(--surface, #fffdf6); }
.mesa-empty h2 { margin: 0 0 6px; }
.mesa-empty p { margin: 0 auto 14px; max-width: 42ch; }
.mesa-empty .actions { justify-content: center; }
.mesa-empty.muted { border: 0; background: none; }

/* Foco visible y menos movimiento (§25) */
.mesa-view:focus-visible, .mesa-pile-chip:focus-visible, .mesa-continue-item:focus-visible, .mesa-move-menu button:focus-visible {
    outline: 2px solid var(--brand, #e07a1f); outline-offset: 2px;
}
@media (max-width: 480px) { .mesa-tools { flex: 1; justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .mesa-continue-item, .mesa-pile-chip { transition: none; } }

/* ============================================================
   MI MESA v2 (feedback usuario 09/2026) — LISTA VERTICAL AMPLIA.
   Carpetas siempre visibles como secciones; una acción principal
   por material + menú «⋯» con opciones grandes. Mobile-first.
   ============================================================ */
.mesa-bar { margin: 4px 0 10px; }
.mesa-bar .mesa-add { flex: 1 1 auto; }
.mesa-bar .mesa-add input { padding: 13px 18px; font-size: 15px; }
.mesa-bar .mesa-add-btn { padding: 11px 18px; font-size: 15px; }

.mesa-tools { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 0 0 18px; }
.mesa-search-input { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 15px; padding: 10px 16px; border: 1px solid var(--line, #e4d9c8); border-radius: 999px; background: var(--surface, #fff); }
.mesa-search-input:focus { outline: 2px solid var(--brand, #e07a1f); outline-offset: 1px; }
.mesa-tabs { display: flex; gap: 2px; background: #0000000a; border-radius: 999px; padding: 3px; }
.mesa-tab { border: 0; background: none; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; color: inherit; min-height: 40px; }
.mesa-tab.on { background: var(--surface, #fffdf6); box-shadow: 0 1px 4px rgba(35, 25, 15, .16); font-weight: 600; }
.mesa-newpile-form { display: inline-flex; gap: 6px; align-items: center; }
.mesa-newpile-form input { font: inherit; font-size: 14px; padding: 8px 12px; border: 1px dashed var(--line, #e4d9c8); border-radius: 999px; min-width: 0; width: 200px; }

/* La lista: una columna amplia y holgada, centrada para lectura cómoda */
.mesa-list { display: flex; flex-direction: column; gap: 14px; max-width: 780px; margin: 0 auto; }
.mesa-sec { display: flex; align-items: center; gap: 8px; margin: 14px 0 -2px; font-size: 15px; }
.mesa-sec-name { font-weight: 700; overflow-wrap: anywhere; }
.mesa-sec-n { color: var(--muted, #7a6a55); font-size: 13px; }
.mesa-sec-x { border: 0; background: #0000000a; border-radius: 8px; font-size: 16px; line-height: 1; padding: 6px 10px; margin-left: auto; cursor: pointer; color: inherit; min-height: 36px; }
.mesa-sec-x:hover { background: #0000001c; }
.mesa-sec-rename { flex: 1; }
.mesa-sec-rename input { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--brand, #e07a1f); border-radius: 8px; width: min(320px, 60vw); }

.mesa-row {
    position: relative; background: var(--surface, #fffdf6); color: var(--ink, #23190f);
    border: 1px solid var(--line, #e4d9c8); border-radius: 14px; padding: 14px 16px 12px;
    box-shadow: 0 1px 6px rgba(35, 25, 15, .05);
    display: flex; flex-direction: column; gap: 6px;
}
.mesa-row.is-pinned { border-color: var(--brand, #e07a1f); background: var(--accent-soft, #fff9ef); }
.mesa-row-top { display: flex; align-items: center; gap: 8px; }
.mesa-when { margin-left: auto; font-size: 12px; color: var(--muted, #7a6a55); white-space: nowrap; }
.mesa-row h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.mesa-text { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.mesa-text.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.mesa-row blockquote { margin: 0; font-size: 15px; line-height: 1.5; font-style: italic; border-left: 3px solid var(--brand, #e07a1f); padding-left: 12px; overflow-wrap: anywhere; }
.mesa-row code { display: block; background: #241d13; color: #f5ead6; padding: 12px 14px; border-radius: 10px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mesa-task { display: flex; align-items: baseline; gap: 10px; }
.mesa-task input { width: 18px; height: 18px; flex: none; transform: translateY(2px); }
.ws-done .mesa-text { text-decoration: line-through; opacity: .6; }
.mesa-src { font-size: 13px; color: var(--muted, #7a6a55); text-decoration: none; }
.mesa-src:hover { text-decoration: underline; color: var(--brand, #e07a1f); }

/* Distintivo de tipo: una etiqueta de color, no seis apps distintas */
.mesa-kind { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; background: #0000000f; }
.mesa-kind-postit { background: var(--ws-yellow, #ffe9a8); color: #4a3a12; }
.mesa-kind-note { background: #dde9f9; color: #22405f; }
.mesa-kind-clip { background: #efe4d2; color: #55432a; }
.mesa-kind-calculation { background: #241d13; color: #f5ead6; }
.mesa-kind-mindmap { background: #e8dcf7; color: #43306b; }
.mesa-kind-task { background: #d8f3e0; color: #1f5130; }

/* Acciones: UNA principal + «⋯» */
.mesa-acts { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mesa-acts .button { font-size: 14px; padding: 8px 16px; }
.mesa-dots { border: 1px solid var(--line, #e4d9c8); background: var(--surface, #fff); border-radius: 10px; font-size: 17px; line-height: 1; padding: 6px 12px; cursor: pointer; color: inherit; min-height: 38px; }
.mesa-dots:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* Menú «⋯»: opciones grandes, táctiles, con texto claro */
.mesa-dots-menu {
    position: fixed; z-index: 980; min-width: 250px; max-width: calc(100vw - 24px); max-height: 80dvh; overflow: auto;
    padding: 8px; background: var(--surface, #fffdf6); border: 1px solid var(--line, #e4d9c8); border-radius: 14px;
    box-shadow: 0 12px 34px rgba(35, 25, 15, .22); display: flex; flex-direction: column;
}
.mesa-dots-menu button { border: 0; background: none; text-align: left; font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 10px; cursor: pointer; color: inherit; min-height: 44px; }
.mesa-dots-menu button:hover { background: #0000000d; }
.mesa-dots-menu button.on { color: var(--brand, #e07a1f); font-weight: 600; }
.mesa-dots-menu button.danger { color: #b3261e; }
.mesa-menu-label { margin: 6px 12px 2px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #7a6a55); }
.mesa-menu-sep { border: 0; border-top: 1px solid var(--line, #e4d9c8); margin: 6px 8px; }

.mesa-list .mesa-empty { margin-top: 8px; }

/* Foco visible y menos movimiento */
.mesa-tab:focus-visible, .mesa-dots:focus-visible, .mesa-sec-x:focus-visible,
.mesa-dots-menu button:focus-visible, .mesa-search-input:focus-visible, .mesa-acts .button:focus-visible {
    outline: 2px solid var(--brand, #e07a1f); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .mesa-tab, .mesa-dots, .mesa-dots-menu { transition: none; } }
@media (max-width: 560px) {
    .mesa-tools { gap: 8px; }
    .mesa-tabs { width: 100%; overflow-x: auto; }
    .mesa-tab { padding: 8px 12px; }
    .mesa-row { padding: 12px 12px 10px; }
}

/* ============================================================
   MI MESA v3 (feedback usuario 09/2026) — KANBAN personal.
   Tres columnas (Por hacer → En curso → Completadas) con arrastre
   nativo. Las tarjetas reutilizan la tipografía de mesa-row; las
   clases .mesa-row* siguen valiendo para el tablero via .mesa-card.
   ============================================================ */
.mesa-board { display: grid; grid-template-columns: repeat(var(--mesa-cols, 3), minmax(0, 1fr)); gap: 14px; align-items: start; }
.mesa-col {
    background: #00000008; border: 1px solid var(--line, #e4d9c8); border-radius: 16px;
    padding: 10px; min-height: 180px; transition: background .12s ease, border-color .12s ease;
}
.mesa-col.is-over { background: #e07a1f14; border-color: var(--brand, #e07a1f); border-style: dashed; }
.mesa-col-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-weight: 700; font-size: 14px; padding: 2px 6px 10px;
}
.mesa-col-n { background: var(--surface, #fff); border: 1px solid var(--line, #e4d9c8); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; color: var(--muted, #7a6a55); }
.mesa-col-body { display: flex; flex-direction: column; gap: 10px; }
.mesa-col-ghost { border: 1px dashed var(--line, #e4d9c8); border-radius: 12px; padding: 18px 12px; text-align: center; font-size: 13px; color: var(--muted, #7a6a55); margin: 0; }
.mesa-col-done .mesa-card { opacity: .72; }
.mesa-col-done .mesa-card h3, .mesa-col-done .mesa-card .mesa-text { text-decoration: line-through; }

/* Tarjeta kanban: misma piel que .mesa-row, compacta para caber en columna */
.mesa-card {
    position: relative; background: var(--surface, #fffdf6); color: var(--ink, #23190f);
    border: 1px solid var(--line, #e4d9c8); border-radius: 14px; padding: 12px 13px 10px;
    box-shadow: 0 1px 6px rgba(35, 25, 15, .05);
    display: flex; flex-direction: column; gap: 6px;
    cursor: grab;
}
.mesa-card:hover { box-shadow: 0 4px 14px rgba(35, 25, 15, .12); }
.mesa-card.is-dragging { opacity: .45; cursor: grabbing; }
.mesa-card.is-pinned { border-color: var(--brand, #e07a1f); background: var(--accent-soft, #fff9ef); }
.mesa-card .mesa-acts { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mesa-card .mesa-acts .button { font-size: 13px; padding: 7px 12px; }
.mesa-card .mesa-text.clamp { -webkit-line-clamp: 4; }
.mesa-card .mesa-row-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mesa-card-pile { font-size: 11px; color: var(--muted, #7a6a55); background: #0000000a; border-radius: 999px; padding: 2px 8px; }
.mesa-card h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.mesa-card blockquote { margin: 0; font-size: 14px; line-height: 1.45; font-style: italic; border-left: 3px solid var(--brand, #e07a1f); padding-left: 10px; overflow-wrap: anywhere; }
.mesa-card code { display: block; background: #241d13; color: #f5ead6; padding: 10px 12px; border-radius: 10px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Chips de carpetas (filtro de tablero) */
.mesa-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }

/* Renombrar carpeta desde el menú */
.mesa-rename-row { display: flex; gap: 6px; padding: 6px; }
.mesa-rename-row input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--brand, #e07a1f); border-radius: 8px; }

/* Panel «⚙ Columnas»: gestión de los estatus propios del kanban (migración 131) */
.mesa-cols-menu { width: min(360px, calc(100vw - 24px)); }
.mesa-colrow { display: flex; align-items: center; gap: 6px; padding: 3px 6px; }
.mesa-colrow input {
    flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 7px 9px;
    border: 1px solid var(--line, #e4d9c8); border-radius: 8px;
    background: var(--surface, #fff); color: var(--ink, #23190f);
}
.mesa-colrow button {
    border: 1px solid var(--line, #e4d9c8); background: var(--surface, #fff); color: inherit;
    border-radius: 8px; padding: 6px 9px; font-size: 13px; cursor: pointer; min-height: 34px;
}
.mesa-colrow button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.mesa-colrow button:disabled { opacity: .4; cursor: default; }
.mesa-colrow button.danger { color: #b3261e; border-color: #e6b3ae; }

/* La vista plana (búsqueda/papelera) conserva el ancho de lectura de v2 */
.mesa-flat { display: flex; flex-direction: column; gap: 12px; max-width: 780px; margin: 0 auto; }
.mesa-flat .mesa-card { cursor: default; }

/* Foco visible y menos movimiento */
.mesa-card:focus-visible, .mesa-col.is-over { outline: 2px solid var(--brand, #e07a1f); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mesa-col, .mesa-card { transition: none; } }
@media (max-width: 860px) {
    /* Mobile: el kanban se vuelve columnas apiladas con scroll horizontal por tarjeta larga */
    .mesa-board { grid-template-columns: 1fr; }
    .mesa-col { min-height: 0; }
}