/*
 * Semanly · tablero.css (núcleo). La semana: la tira de semanas, el resumen, el tablero (grilla de 6 columnas en el
 * celu; 15 en la compu), el post-it, el dock con el taco, el pinche y el tacho, la ficha, «Pegar una lista» y los
 * vuelos de las animaciones.
 */

/* ============ La tira de semanas ============ */
.sem-tira{display:flex;gap:2px;margin:4px calc(var(--m) * -1) 0;padding:0 var(--m);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);scroll-padding:0 var(--m)}
.sem-tira::-webkit-scrollbar{display:none}
.wchip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;min-width:44px;min-height:44px;padding:12px 12px 0;border:0;background:transparent;color:var(--ink-2);font:500 14px/1 var(--f);white-space:nowrap;transition:color var(--d-1)}
/* el número, en una pastilla (ronda 6): gris clara; la semana que se mira, en azul; la pasada (las hechas, con la tilde), en verde.
   Contraste del número contra su pastilla ≥ 4,5:1 en claro y en oscuro (--on-accent es blanco en claro y casi negro en oscuro). */
.wchip>b{--pz:color-mix(in srgb,var(--ink) 7%,transparent);--pz-t:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:22px;height:20px;padding:0 7px;border-radius:10px;background:var(--pz);color:var(--pz-t);font:600 12px/1 var(--f);font-variant-numeric:tabular-nums;white-space:nowrap;transition:background-color var(--d-1),color var(--d-1)}
.wchip>b .ico{display:block;flex:none;width:11px;height:11px;stroke-width:2.4}
.wchip.pasada>b{--pz:color-mix(in srgb,var(--ok) 16%,transparent);--pz-t:color-mix(in srgb,var(--ok) 60%,var(--ink))}
.wchip::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:1px;background:var(--accent);transform:scaleX(0);transition:transform var(--d-2) var(--salida)}
.wchip:hover{color:var(--ink)}
.wchip[aria-current="true"]{color:var(--ink);font-weight:600}
.wchip[aria-current="true"]>b{--pz:var(--accent);--pz-t:var(--on-accent)}
.wchip.pasada[aria-current="true"]>b{--pz:color-mix(in srgb,var(--ok) 70%,var(--ink));--pz-t:var(--on-accent)}
.wchip[aria-current="true"]::after{transform:scaleX(1)}
body.arrastrando .wchip.destino{color:var(--ink);background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:8px 8px 0 0}
body.arrastrando .wchip.caliente{background:var(--accent-soft);color:var(--accent)}
body.arrastrando .wchip.caliente::after{transform:scaleX(1)}

/* ============ El resumen: «2 de 12 hechas · 4 vienen de antes», el filtro y el orden ============ */
.sem-resumen{display:flex;align-items:center;gap:8px;margin:6px 0 0}
.sem-resumen .sem-cuenta{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;min-height:44px}
.sem-cuenta p{flex:1;min-width:0;order:0;font:500 13px/1.35 var(--f);color:var(--ink-2);font-variant-numeric:tabular-nums}
.sem-cuenta p b{color:var(--ink);font-weight:600}
.sem-cuenta .parte{white-space:nowrap}
.sem-cuenta p.partido .sep{display:none} /* si el resumen se parte en dos renglones, el «·» no queda colgado: */
.sem-cuenta p.partido .sep+.parte{display:block} /* la segunda parte va abajo, entera */
.sem-resumen .selector{order:1}
.sem-resumen .avance{height:3px;margin-top:6px}
@media (max-width:380px){.sem-cuenta p{font-size:12.5px}.sem-resumen{gap:6px}}
/* el filtro, el orden y el proyecto de «Pegar una lista»: botones que abren un menú (SL.menu, menu.js) */
.selector{position:relative;display:inline-flex;align-items:center;gap:4px;flex:none;min-height:44px;padding:0 8px 0 10px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font:500 13.5px/1 var(--f);white-space:nowrap;cursor:pointer;transition:border-color var(--d-1),background-color var(--d-1)}
.selector:hover,.selector.abierto{border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.selector .ico{width:16px;height:16px;color:var(--ink-3)}
.selector .menu-cara{gap:4px}
.selector .punto{margin-right:2px}
.selector.solo-ico{width:44px;padding:0;justify-content:center}
.selector.solo-ico .menu-cara{display:none}
.sem-objetivo{display:flex;align-items:baseline;gap:8px;margin-top:6px;font:500 12.5px/1.3 var(--f);color:var(--ink)}
.sem-objetivo .etiqueta{flex:none}
.sem-objetivo span:nth-child(2){flex:1;min-width:0;overflow-wrap:break-word}
.sem-objetivo em{font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums}
#franja:empty{display:none}
#franja{margin-top:10px}

/* ============ El tablero ============ */
/* .tablero es el tablero (el fondo); adentro, una o más secciones (una por día con el orden «día»), cada una con su
   .grilla. Celu: 6 columnas en filas parejas (chico 2, mediano 4, grande 6). Compu: 15 columnas (chico 3, mediano 4,
   grande 5) y filas de 4 px: cada post-it ocupa las de su alto (tablero.js) y la grilla queda compacta. */
.tablero-caja{container-type:inline-size;container-name:tablero;margin-top:10px}
.tablero{position:relative;display:flex;flex-direction:column;gap:18px;min-height:240px;padding:8px;border:1px solid var(--board-line);border-radius:var(--r-board);background:var(--board);color:var(--board-ink);transition:box-shadow var(--d-2)}
.tablero.destino{box-shadow:0 0 0 2px var(--accent-ring),inset 0 0 0 1px var(--accent)}
.dia-seccion{min-width:0}
.dia-seccion.vacia:not(:has(.dia-titulo:not([hidden]))){display:none}
.dia-titulo{display:flex;align-items:baseline;gap:8px;margin:2px 2px 10px;font:600 13px/1.2 var(--f);color:var(--board-ink)}
.dia-titulo.hoy{color:var(--accent)}
.dia-titulo.paso{color:var(--warm)}
:root[data-style="pizarra"] .dia-titulo{color:#DDE5F2}
.dia-nada{grid-column:1/-1;margin:0 2px;font:500 12.5px/1.4 var(--f);color:var(--board-ink);opacity:.8}
.dia-nada:empty{display:none}
.grilla{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row dense;gap:7px;align-items:stretch;align-content:start}
.tablero .vacio{color:var(--board-ink);padding:36px 12px}
.tablero .vacio svg{color:var(--board-ink);opacity:.75}
.tablero .vacio b{color:inherit}
.tablero .vacio-taco svg{width:132px}
:root[data-style="pizarra"] .tablero .vacio b{color:#fff}

/* ---- El post-it ---- */
.note{position:relative;display:flex;flex-direction:column;min-width:0;min-height:78px;padding:10px 11px 9px;border-radius:var(--r-nota);background:var(--papel,var(--p-sin));color:var(--nota-ink);box-shadow:var(--sh-nota);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y;transition:transform var(--d-2) var(--salida)}
.note.s-s{grid-column:span 2;min-height:88px}
.note.s-m{grid-column:span 4}
.note.s-l{grid-column:span 6}
.note .txt{font:500 12.5px/1.36 var(--f);overflow-wrap:break-word;word-break:normal;hyphens:manual;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.note.s-m .txt{font-size:14px;line-height:1.38;-webkit-line-clamp:4}
.note.s-l .txt{font:600 17px/1.3 var(--f);letter-spacing:-.01em;-webkit-line-clamp:3}
.note .txt:empty::before{content:"Sin texto";color:var(--nota-ink-2);opacity:.6}
.note .pie{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:3px;margin-top:auto;padding-top:8px;font:500 12.5px/1.2 var(--f);color:var(--nota-ink-2);min-width:0}
.note .pie:empty{display:none}
.note .proy{display:inline-flex;align-items:center;gap:6px;min-width:0}
.note .proy .punto{flex:none;background:var(--punto)}
.note .proy .nom{min-width:0;overflow-wrap:anywhere} /* el nombre del proyecto, entero (si no entra, baja de renglón) */
.note .der{margin-left:auto;flex:none;font-variant-numeric:tabular-nums}
.note .sem{color:var(--warm-papel);font-weight:600} /* --warm sobre el papel azul no llega a 4,5 */
.note .dia.hoy{color:var(--accent);font-weight:600}
.note .dia.paso{color:var(--warm-papel);font-weight:600}
/* «viene de antes»: la esquina doblada */
.note.antes::after{content:"";position:absolute;top:0;right:0;width:15px;height:15px;border-radius:0 0 0 2px;background:linear-gradient(225deg,var(--board) 50%,color-mix(in srgb,var(--papel) 82%,var(--nota-ink)) 50%);box-shadow:-1px 1px 1.5px rgba(31,47,77,.10)}
@media (hover:hover){.note:hover{box-shadow:0 1px 1px rgba(31,47,77,.06),0 14px 22px -12px rgba(31,47,77,.42)}}
.note.elegida{box-shadow:0 0 0 2px var(--accent),0 14px 22px -12px rgba(31,47,77,.42);transform:translateY(-2px)}
.note:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.note.elegida:focus-visible{outline:none} /* el borde azul de elegido ya marca el foco */
.hoja-menu .lista{border:0;background:transparent}
.hoja-menu .fila:first-child{border-top:0}
@media (min-width:1024px){.hoja-fondo.globo .hoja-menu{width:280px;padding:6px}.hoja-fondo.globo .hoja-menu.con-x{padding-top:50px}.hoja-menu .fila{min-height:44px;border-radius:8px;border-top:0}.hoja-menu .fila:hover{background:var(--seg)}}
.note.lugar-vacio{visibility:hidden}
.note.llegando{opacity:0}
.note.editing{cursor:text;box-shadow:0 0 0 2px var(--accent),var(--sh-alto)}
.note.editing textarea{flex:1;width:100%;min-height:3.2em;margin:0;padding:0;border:0;outline:none;resize:none;background:transparent;color:inherit;font:inherit;font-size:16px;line-height:1.35}
.note.s-l.editing textarea{font-weight:600}
.note.editing textarea::placeholder{color:var(--nota-ink-2);opacity:.7}
.note.editing .pie{min-height:24px}
.sugerencia{display:inline-flex;flex:none;white-space:nowrap;align-items:center;gap:6px;margin-left:auto;min-height:28px;padding:0 8px;border:1px solid color-mix(in srgb,var(--nota-ink) 22%,transparent);border-radius:6px;background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--nota-ink);font:600 12.5px/1 var(--f);cursor:pointer;animation:fundir-entra var(--d-2) var(--salida)}
.sugerencia .ico{width:14px;height:14px}
.aviso-pausa{flex:1 1 100%;order:3;margin-top:4px;font:500 11.5px/1.3 var(--f);color:var(--nota-ink-2)}
.note.editing .pie{flex-wrap:wrap}
.sugerencia kbd{height:18px;min-width:0;padding:0 4px;font-size:10.5px}
:root[data-style="pizarra"] .note{box-shadow:0 1px 1px rgba(0,0,0,.2),0 10px 18px -10px rgba(0,0,0,.55)}

/* ---- Deslizar (celu): a la derecha, al pinche; a la izquierda, al tacho ---- */
.note.deslizando{z-index:2;transition:none;box-shadow:var(--sh-alto)}
/* La franja de atrás: a la derecha, el pinche (azul de LYRA); a la izquierda, el tacho (rojo ladrillo). El color crece
   con la distancia (--p, de gestos.js: una capa del color pleno con esa opacidad) y llega a pleno en el umbral */
.deslizar-fondo{position:absolute;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-radius:var(--r-nota);background:var(--accent-soft);color:var(--accent);pointer-events:none;overflow:hidden;isolation:isolate}
.deslizar-fondo::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);opacity:var(--p,0)}
.deslizar-fondo[data-dir="tacho"]{background:var(--danger-soft);color:var(--danger)}
.deslizar-fondo[data-dir="tacho"]::before{background:var(--danger)}
.deslizar-fondo .dz{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--f);transition:transform var(--d-2) var(--salida),opacity var(--d-1)}
.deslizar-fondo .dz .ico{width:24px;height:24px;stroke-width:1.8}
/* solo el lado hacia donde va (el otro no ocupa lugar); en un post-it angosto (lo que se descubre no alcanza para el rótulo), solo el ícono */
.deslizar-fondo{container-type:inline-size}
.deslizar-fondo[data-dir="pinche"]{justify-content:flex-start}
.deslizar-fondo[data-dir="tacho"]{justify-content:flex-end}
.deslizar-fondo[data-dir="pinche"] .dz-tacho,.deslizar-fondo[data-dir="tacho"] .dz-pinche{display:none}
@container (max-width:132px){.deslizar-fondo .dz{margin:0 -4px}.deslizar-fondo .dz b{display:none}} /* angosto: solo el ícono (el rótulo quedaba debajo del papel) */
.deslizar-fondo .dz b{opacity:0;transition:opacity var(--d-1)}
.deslizar-fondo.fuerte[data-dir="pinche"]{color:var(--on-accent)}
.deslizar-fondo.fuerte[data-dir="tacho"]{color:var(--on-danger)}
.deslizar-fondo.armado .dz{transform:scale(1.12)}
.deslizar-fondo.armado .dz b{opacity:1}
/* el tinte del papel que va al pinche o al tacho: encima del papel y debajo del texto */
.note[data-tinte]{isolation:isolate}
.note[data-tinte]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--accent);opacity:calc(var(--tinte,0) * var(--tinte-max));pointer-events:none}
.note[data-tinte="tacho"]::before{background:var(--danger)}

/* ---- La fila de días (aparece al levantar un post-it o una hoja del taco) ---- */
.dias-fila{position:fixed;z-index:640;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--sh-globo);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity var(--d-2),transform var(--d-2) var(--salida)}
.dias-fila.visible{opacity:1;transform:none;pointer-events:auto}
.dia-celda{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border:1px dashed var(--line-2);border-radius:8px;color:var(--ink-2);font:500 11.5px/1 var(--f);font-variant-numeric:tabular-nums;transition:background-color var(--d-1),border-color var(--d-1),transform var(--d-1) var(--salida)}
.dia-celda b{font:600 14px/1 var(--f);color:var(--ink)}
.dia-celda.hoy b,.dia-celda.hoy{color:var(--accent)}
.dia-celda.paso,.dia-celda.paso b{color:var(--ink-3)}
.dia-celda.paso{border-color:var(--line)}
.dia-celda.caliente{border-style:solid;border-color:var(--accent);background:var(--accent-soft);transform:scale(1.06)}

/* ---- Semana pasada (lo de solo lectura, mientras Rituales no lo reemplace) ---- */
.resumen-pasada{display:grid;gap:18px;padding:8px 6px;color:var(--board-ink)}
.resumen-pasada h3{font:600 var(--t2-tam)/1.3 var(--f);color:var(--ink)}
:root[data-style="pizarra"] .resumen-pasada h3{color:#fff}
.resumen-pasada p{margin-top:4px;font:500 13px/1.4 var(--f)}
.resumen-ir{margin-top:14px}
.minis{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mini{display:inline-flex;align-items:center;min-height:32px;max-width:100%;padding:6px 10px;border:0;border-radius:var(--r-nota);background:var(--papel);color:var(--nota-ink);font:500 12.5px/1.3 var(--f);box-shadow:var(--sh-nota);text-align:left}
button.mini{cursor:pointer;min-height:44px}

/* ---- Compu: 15 columnas (chico 3, mediano 4, grande 5); el post-it casi cuadrado; filas de 4 px ---- */
@container tablero (min-width: 640px){
  .tablero{padding:16px;min-height:440px;gap:22px}
  .grilla{grid-template-columns:repeat(15,minmax(0,1fr));grid-auto-rows:4px;column-gap:12px;row-gap:0;align-items:start}
  .note{align-self:start;min-height:0;padding:14px 15px 12px}
  /* el alto sigue al texto, con un mínimo por tamaño: el tamaño (ancho, letra y mínimo) dice la importancia */
  .note.s-s{grid-column:span 3;min-height:108px}
  .note.s-m{grid-column:span 4;min-height:128px}
  .note.s-l{grid-column:span 5;min-height:156px}
  .note.s-m .txt{font-size:14.5px}
  .note.s-l .txt{font-size:18px;line-height:1.28}
  .dia-titulo{font-size:13.5px}
}

/* ============ El dock ============ */
/* En el celu, de izquierda a derecha: el tacho, Post (los tres tamaños y «Pegar») y el pinche. Post no se achica: si
   no entra, primero se va el rótulo del tacho (tablero.js, encajarDock) */
.dock-in{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:100%;padding:6px var(--m) 7px}
.taco-caja{display:flex;flex:none;align-items:flex-end;gap:4px;transition:opacity var(--d-2),transform var(--d-2) var(--salida)}
.taco-caja>.etiqueta{display:none}
/* Cada tamaño del taco: el bloque de hojas y su nombre debajo. El bloque deja lugar abajo y a la derecha para las hojas
   de abajo (--taco-dx, --taco-dy): el nombre nunca queda debajo de las hojas ni de su sombra. */
.stack{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;min-width:46px;min-height:64px;padding:2px 2px 0;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink);font:600 11.5px/1.15 var(--f);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.stack>small{display:none}
.stack:hover .taco-hoja{transform:translate(-1px,-2px) rotate(-1.5deg)}
.stack:active .taco{transform:scale(.97)}
#pad.disabled .stack{opacity:.4;pointer-events:none}
.btn.pegar-btn{flex:none;flex-direction:column;justify-content:flex-end;gap:5px;min-width:44px;min-height:64px;margin:0;padding:2px 2px 0;color:var(--ink);font:600 11.5px/1.15 var(--f)}
.pegar-btn .ico{width:24px;height:24px;margin-bottom:6px;color:var(--accent)}
.pegar-corto{display:inline}
/* El taco: la hoja de arriba en el color del post-it que va a crear (sin proyecto, el gris lila de siempre) y las de
   abajo apiladas, con sus bordes a la vista */
.taco{--taco-dx:4.5px;--taco-dy:7.5px;position:relative;display:block;flex:none;width:var(--tt);height:var(--tt);transition:transform var(--d-1) var(--salida)}
.taco-bloque,.taco-hoja{position:absolute;inset:0;border-radius:2px;background:var(--papel,var(--p-sin))}
.taco-bloque{box-shadow:1.5px 2.5px 0 -.5px var(--papel,var(--p-sin)),1.5px 2.5px 0 0 var(--taco-borde),3px 5px 0 -.5px var(--papel,var(--p-sin)),3px 5px 0 0 var(--taco-borde),4.5px 7.5px 0 -.5px var(--papel,var(--p-sin)),4.5px 7.5px 0 0 var(--taco-borde),calc(var(--tt) * .1) calc(var(--tt) * .2) calc(var(--tt) * .2) calc(var(--tt) * -.117) var(--taco-sombra)} /* la sombra crece con el taco: 6px 12px 12px -7px en el grande de la compu */
.taco-hoja{transform-origin:12% 92%;box-shadow:0 0 0 .5px var(--taco-hoja-borde);transition:transform var(--d-2) var(--salida)}
/* el «+» del taco del dock (decorativo: el botón ya dice «Post-it nuevo, chico…») */
.taco.con-mas{margin:0 var(--taco-dx) var(--taco-dy) 0}
.taco.con-mas .taco-hoja::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:calc(var(--tt) * .045);color:var(--taco-mas);font:400 calc(var(--tt) * .62)/1 var(--f);pointer-events:none}
.pinche-caja{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;border:0;background:transparent;padding:0;color:var(--ink);cursor:pointer;border-radius:var(--r-ctl)}
.pinche-cuenta{position:absolute;top:-2px;right:-6px;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--on-accent);font:600 12px/1 var(--f);font-variant-numeric:tabular-nums;overflow:hidden}
.pinche-cuenta.cero{background:var(--seg);color:var(--ink-3)}
.pinche-lbl{display:contents}
.pinche-pal,.pinche-ayuda,.pegar-txt{display:none}
/* El tacho, a la izquierda y siempre a la vista: chico, con su rótulo debajo como los tamaños de Post (si no entra,
   sin rótulo: tablero.js, encajarDock) */
.tacho-caja{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;flex:none;min-width:44px;min-height:64px;border:0;background:transparent;padding:0;color:var(--ink);cursor:pointer}
.dock-in .tacho-lbl{display:block;font:600 11.5px/1.15 var(--f);white-space:nowrap}
.dock-in.tacho-sin-rotulo .tacho-lbl{display:none}
.dock-in.dock-justo .taco-caja{gap:2px}
.dock-in.dock-justo .stack,.dock-in.dock-justo .pegar-btn{min-width:40px;font-size:10.5px}
/* mientras se arrastra un post-it, Post se atenúa: los destinos son el tacho y el pinche */
body.arrastrando:not(.arrastrando-taco) .taco-caja{opacity:.35}
/* donde va a caer: se agranda y se marca (un halo de su color detrás) */
.pinche-caja,.tacho-caja{isolation:isolate}
.pinche-caja::before,.tacho-caja::before{content:"";position:absolute;inset:-4px;z-index:-1;border-radius:14px;background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent);opacity:0;transition:opacity var(--d-1)}
.tacho-caja::before{background:var(--danger-soft);box-shadow:inset 0 0 0 2px var(--danger)}
.pinche-caja.armado::before,.tacho-caja.armado::before{opacity:1}
.pinche-caja.armado .pinche{transform:scale(1.12)}
.tacho-caja.armado .tacho{transform:scale(1.12) rotate(-3deg)}

/* El pinche: base de madera, pila de papeles en perspectiva, aguja por delante */
.pinche{position:relative;transition:transform var(--d-2) var(--salida)}
.pinche-base{position:absolute;bottom:0;height:auto}
.pinche-pila{position:absolute;inset:0}
.pinche-papel{position:absolute;border-radius:2px;background:var(--papel);transform:perspective(300px) rotateX(62deg) rotate(var(--r,0deg));box-shadow:0 1px 0 rgba(31,47,77,.18),0 2px 3px -1px rgba(31,47,77,.25)}
.pinche-papel::after,.note .agujero{content:"";position:absolute;left:50%;top:50%;width:13%;height:13%;min-width:4px;min-height:4px;border-radius:50%;background:var(--agujero);transform:translate(-50%,-50%)}
.note .agujero{width:7%;height:auto;aspect-ratio:1}
.pinche-aguja{position:absolute;z-index:100;background:linear-gradient(90deg,var(--aguja-luz),var(--aguja) 55%);clip-path:polygon(0 7px,50% 0,100% 7px,100% 100%,0 100%);border-radius:0 0 1px 1px;transform-origin:50% 100%}

/* El tacho: canasto de alambre en dos capas; los bollos van entre las dos */
.tacho{position:relative;transform-origin:50% 90%;transition:transform var(--d-2) var(--salida)}
.tacho>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tacho-bollos{z-index:1}.tacho-adelante{z-index:2}

/* ============ Los vuelos (animaciones.js) ============ */
.volando{pointer-events:none;transform-origin:50% 50%;transition:none!important}
.volando.levantado{box-shadow:var(--sh-alto)}
.volando.note{position:absolute}
/* el arrugado en capas ya dibujadas (animaciones.js, capasDeArruga; sin clip-path, m3): el papel deja de pintarse y cada
   capa (la forma, el tinte y los pliegues) se muestra en su tramo con opacity, debajo del texto */
.con-capas{background:transparent!important;box-shadow:none!important}
.con-capas::before,.con-capas::after{display:none!important}
.arruga-capa{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;border-radius:inherit;pointer-events:none}
div.arruga-capa>i{position:absolute;inset:0;border-radius:inherit}
.arruga-capa .pl{fill:none;stroke:var(--nota-pliegue);stroke-width:1.4}
.arrugando{box-shadow:none!important}
.arrugando>.txt,.arrugando>.pie{animation:fundir-sale 100ms ease-out forwards} /* rápido: sin clip-path (m3), el texto no se recorta con la forma */
.vuelo-bollo{transform-origin:50% 50%}
.vuelo-bollo svg{position:relative;width:100%;height:100%;overflow:visible}
.vuelo-bollo::before{content:"";position:absolute;left:12%;right:12%;bottom:-8%;height:22%;border-radius:50%;background:rgba(20,24,36,.18)} /* la sombra, sin filter */
.vuelo-aguja{position:absolute;z-index:2}
.vuelo-tacho{position:absolute;overflow:visible}

/* ============ La compu: el dock es la columna de la derecha ============ */
@media (min-width:1024px){
  .sem-tira{margin:18px 0 0;padding:0}
  .sem-resumen{margin:0;gap:16px;flex-wrap:nowrap}
  .sem-resumen .sem-cuenta{display:grid;gap:8px;flex:1;min-width:0}
  .sem-resumen .avance{order:0;flex:none;margin-top:0}
  .cab-der .sem-resumen{width:min(440px,42vw)}
  .cab-der .selector.filtro{display:none}
  .cab-der .sem-cuenta p{font-size:13.5px}
  .tablero-caja{margin-top:18px}
  .dock-in{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:28px 18px 22px;overflow-y:auto}
  .taco-caja{flex-direction:column;align-items:center;gap:6px} /* los tacos crecieron (36/48/60): la columna sigue entrando entera desde 870 px de alto */
  .taco-caja>.etiqueta{display:block;margin-bottom:2px}
  .stack{min-width:0;width:100%;min-height:0;padding:6px;gap:6px;font-size:13px}
  .stack:hover{background:var(--hover)}
  .stack>small{display:block;font:500 12px/1.2 var(--f);color:var(--ink-2)}
  .btn.pegar-btn{flex-direction:row;justify-content:center;gap:8px;min-width:44px;min-height:36px;margin:0;padding:0 10px;color:var(--accent);font:600 13px/1.2 var(--f)}
  .pegar-btn .ico{width:18px;height:18px;margin:0}
  .pegar-corto{display:none}
  /* la columna, de arriba abajo: el pinche, Post y el tacho */
  .pinche-caja{margin:0;padding:0 0 18px;border-bottom:1px solid var(--line);border-radius:0}
  .taco-caja{padding-top:18px}
  .pinche-cuenta{position:static;display:inline-block;min-width:0;height:auto;padding:0;background:none!important;color:inherit!important;font:600 14px/1.2 var(--f);border-radius:0;overflow:visible} /* con overflow:hidden, la línea de base de un inline-block baja al borde y el número sube */
  .pinche-lbl{display:block;font:600 14px/1.2 var(--f)}
  .pinche-pal,.pegar-txt{display:inline}
  .pinche-ayuda{display:block;font:500 12px/1.3 var(--f);color:var(--ink-2);text-align:center}
  .tacho-caja{min-height:0;margin-top:26px;gap:6px}
  .dock-in .tacho-lbl{font:600 13px/1.2 var(--f)}
  body.arrastrando:not(.arrastrando-taco) .taco-caja{opacity:1}
  /* pantalla baja (la columna no entra entera): el taco en una fila, el pinche y el tacho medianos (tablero.js) */
  .dock.baja .dock-in{padding:16px 14px 12px}
  .dock.baja .taco-caja{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;align-items:end}
  .dock.baja .taco-caja>.etiqueta{grid-column:1/-1;margin:0 0 4px;text-align:center}
  .dock.baja .stack{padding:6px 2px;gap:4px;font-size:12px}
  .dock.baja .stack>small{display:none}
  .dock.baja .pegar-btn{grid-column:1/-1;justify-self:center;margin-top:4px}
  .dock.baja .pinche-caja{padding-bottom:12px}
  .dock.baja .taco-caja{padding-top:12px}
  .dock.baja .tacho-caja{margin-top:14px}
}

/* ============ La ficha ============ */
.hoja-ficha{gap:0}
.ficha-papel{position:relative;min-height:0;margin:2px 0 10px;padding:14px 16px 12px;aspect-ratio:auto!important;cursor:text;transform:none!important}
.ficha-papel textarea{display:block;width:100%;min-height:30px;margin:0;padding:0;border:0;outline:none;resize:none;background:transparent;color:var(--nota-ink);font:600 20px/1.3 var(--f);letter-spacing:-.01em;overflow:hidden}
.ficha-papel textarea:focus-visible{outline:none}
.ficha-papel:focus-within{box-shadow:0 0 0 2px var(--accent),var(--sh-nota)}
.ficha-papel .pie{padding-top:10px}
.ficha-origen{margin:0 0 12px;font:500 12.5px/1.4 var(--f);color:var(--ink-2)}
.ficha-fila{display:grid;gap:8px;margin-top:12px}
.fila-cab{display:flex;align-items:center;justify-content:space-between;min-height:16px}
.sin-dia{position:relative;padding:0 2px;border:0;background:transparent;color:var(--ink-2);font:600 12.5px/1 var(--f);cursor:pointer}
.sin-dia::before{content:"";position:absolute;inset:-16px -12px} /* área de 44 */
.sin-dia[aria-pressed="true"]{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ficha-fila .chips{gap:6px}
.ficha-fila .chip{min-height:44px;max-width:100%;padding:0 12px;font-size:13.5px}
.chip-txt{min-width:0;white-space:normal;overflow-wrap:anywhere;padding:4px 0}
.chip.en-pausa{color:var(--ink-3);border-style:dashed}
.chip.en-pausa .ico{width:14px;height:14px}
.hoja-ficha .seg>button{min-height:44px}
.chips.dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dias .chip{min-width:0;justify-content:center;padding:0 6px}
.dias .chip.hoy{color:var(--accent)}
.ficha-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:8px;border-top:1px solid var(--line)}
.ficha-pie .btn.texto{padding:0 6px}
.ficha-mas-semanas{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
@media (min-width:1024px){
  .hoja-ficha .ficha-fila{margin-top:12px}
  .ficha-fila .chip{min-height:36px}
  .hoja-ficha .seg>button{min-height:36px}
  .ficha-papel textarea{font-size:18px}
  .hoja-fondo.globo .hoja-ficha{width:368px}
}

/* ============ Pegar una lista ============ */
.pg-vista{display:flex;flex-wrap:wrap;gap:6px;max-height:180px;overflow:auto;list-style:none}
.pg-vista li{max-width:100%;padding:6px 10px;border-radius:var(--r-nota);background:var(--papel);color:var(--nota-ink);font:500 12.5px/1.3 var(--f);box-shadow:var(--sh-nota)}
.pg-opciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pg-opciones .seg{flex:1 1 240px}
.pg-cuenta{font:500 13px/1.4 var(--f);color:var(--ink-2)}
.pg-cuenta:empty{display:none}

/* ============ Lo que hiciste (al tocar el pinche) ============ */
.hechas-lista{display:grid;gap:8px;list-style:none}
.hechas-lista li{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:var(--r-nota);background:var(--papel);color:var(--nota-ink);box-shadow:var(--sh-nota)}
.hechas-lista li span{flex:1;min-width:0;font:500 13.5px/1.35 var(--f)}
.hechas-lista .btn{background:transparent;border-color:color-mix(in srgb,var(--nota-ink) 22%,transparent);color:var(--nota-ink)}

/* ============ El tacho (al tocarlo): lo tirado, por semana ============ */
.tacho-lista{display:grid;gap:20px}
.tacho-grupo{display:grid;gap:10px}
.tacho-grupo>.etiqueta{margin:0 2px}
.tacho-papeles{display:grid;gap:14px;margin:0;padding:2px 4px 4px;list-style:none}
/* cada papel en su color, un poco arrugado: una leve rotación y las arrugas (pliegues de luz y de sombra, los bordes
   apenas más oscuros) hechas con los tokens del papel (--nota-pliegue, --arruga-luz), así andan en claro y en oscuro */
.tacho-papel{position:relative;isolation:isolate;display:grid;gap:8px;padding:13px 13px 11px 15px;border-radius:var(--r-nota);background:var(--papel);color:var(--nota-ink);box-shadow:var(--sh-nota);transform:rotate(var(--giro,0deg))}
.tacho-papel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:
  linear-gradient(112deg,transparent 30%,var(--arruga-luz) 31%,transparent 34%),
  linear-gradient(64deg,transparent 55%,var(--nota-pliegue) 56.5%,transparent 61%),
  linear-gradient(158deg,transparent 67%,var(--nota-pliegue) 68.5%,transparent 73%),
  linear-gradient(24deg,transparent 16%,var(--nota-pliegue) 17.5%,transparent 21%),
  radial-gradient(130% 115% at 38% 30%,transparent 52%,var(--nota-pliegue))}
.tacho-papel:nth-child(even)::before{transform:scaleX(-1)}
.tacho-papel-txt{margin:0;font:500 14px/1.38 var(--f);overflow-wrap:break-word}
.tacho-papel-pie{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;font:500 12px/1.3 var(--f);color:var(--nota-ink-2)}
.tacho-proy{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.tacho-proy .punto{background:var(--punto)}
.tacho-sacar{justify-self:start;background:transparent;border-color:color-mix(in srgb,var(--nota-ink) 22%,transparent);color:var(--nota-ink)}
@media (max-width:1023px){.tacho-sacar{min-height:44px}}

@media (prefers-reduced-motion:reduce){
  .note,.taco-hoja,.pinche,.tacho{transition:none}
  /* con movimiento reducido, donde va a caer se marca pero no se agranda */
  .pinche-caja.armado .pinche,.tacho-caja.armado .tacho,.deslizar-fondo.armado .dz{transform:none}
}

/* ============ Los que se repiten (ronda 9, Guido 4/11/2026 22:55) ============ */
/* el ↻ en el pie del post-it (y de la ficha): chico, sin texto, en el color del pie */
.note .pie .rep{display:inline-flex;flex:none;align-items:center;gap:4px;color:var(--nota-ink-2)}
.note .pie .rep .ico{width:13px;height:13px;stroke-width:2}
/* la sugerencia «Repetir todos los miércoles» puede bajar de renglón en un post-it chico */
.sugerencia.larga{flex:0 1 auto;min-width:0;max-width:100%;white-space:normal;text-align:left;line-height:1.25;padding-block:5px}
.sugerencia.larga>span{min-width:0;overflow-wrap:anywhere}
/* la ficha: la línea de lo que va a pasar */
.ficha-rep-frase{margin:2px 2px 0;font:500 12.5px/1.4 var(--f);color:var(--ink-2)}
.ficha-rep-frase b{font-weight:600;color:var(--ink)}
/* las semanas que vienen: los que vuelven, en espera (atenuados y punteados, abajo de todo; no son post-its todavía) */
.vuelven{margin-top:16px}
.vuelven-lista{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.vuelve{display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:72px;margin:0;padding:10px 11px 9px;border:1.5px dashed color-mix(in srgb,var(--nota-ink) 30%,transparent);border-radius:var(--r-nota);background:color-mix(in srgb,var(--papel,var(--p-sin)) 50%,transparent);color:var(--nota-ink);text-align:left;font:inherit;cursor:pointer;opacity:.78;transition:opacity var(--d-1),background-color var(--d-1)}
.vuelve:hover{opacity:1}
.vuelve:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1}
.vuelve.s-s{grid-column:span 2}.vuelve.s-m{grid-column:span 4}.vuelve.s-l{grid-column:span 6}
.vuelve .txt{font:500 14px/1.35 var(--f);overflow-wrap:anywhere}
.vuelve.s-l .txt{font-weight:600}
.vuelve .pie{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:3px;margin-top:auto;padding-top:8px;font:500 12.5px/1.2 var(--f);color:var(--nota-ink-2)}
.vuelve .proy{display:inline-flex;align-items:center;gap:6px;min-width:0}
.vuelve .proy .punto{background:var(--punto)}
.vuelve .rep{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.vuelve .rep .ico{width:13px;height:13px;stroke-width:2}
@media (min-width:1024px){
  .vuelven-lista{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
  .vuelve.s-s,.vuelve.s-m,.vuelve.s-l{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){.vuelve{transition:none}}

/* ============ El bollito (girar el post-it en el aire: tablero.js) ============ */
/* El tacho sube y se mueve, esperando el tiro (como Paper Toss). */
.tacho-caja.espera-bollo .tacho{animation:tacho-espera .9s ease-in-out infinite;transform-origin:50% 100%}
@keyframes tacho-espera{0%,100%{transform:translateY(-14px) scale(1.12) rotate(-4deg)}50%{transform:translateY(-18px) scale(1.12) rotate(4deg)}}
.tacho-caja.espera-bollo::before{opacity:1}
@media (prefers-reduced-motion:reduce){.tacho-caja.espera-bollo .tacho{animation:none;transform:translateY(-14px) scale(1.12)}}