/* Tableros personalizados. Las columnas y tarjetas reutilizan kanban.css;
   aquí solo lo propio de esta vista. */

/* ── Cabecera del tablero ──
   Una sola fila: selector en el centro, buscador y filtros a la derecha. Rejilla
   de 3 columnas (hueco / selector / filtros) en vez de centrado absoluto: así el
   selector nunca queda por debajo del buscador cuando hay muchos tableros. */
.board-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:10px 20px 4px;min-height:52px;flex-shrink:0}
.board-tabs{grid-column:2;justify-self:center;position:relative;
  display:flex;gap:2px;padding:4px;border-radius:999px;
  background:var(--c-surface2);border:1px solid var(--c-border);
  min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.board-tabs::-webkit-scrollbar{display:none}
.board-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:7px 16px;border:none;background:transparent;border-radius:999px;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:600;color:var(--c-text2);
  transition:color 0.18s ease}
.board-tab:hover,.board-tab.active{color:#fff}
.board-tab-emoji{font-size:14px;line-height:1}
.board-tab-cursor{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:999px;
  background:var(--c-accent);opacity:0;pointer-events:none;
  transition:transform 0.28s cubic-bezier(0.22,1,0.36,1),width 0.28s cubic-bezier(0.22,1,0.36,1),opacity 0.18s ease}

/* "+" dentro del propio selector, al lado de los nombres */
.board-tab-add{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex-shrink:0;border:none;background:transparent;border-radius:50%;
  color:var(--c-text3);cursor:pointer;transition:var(--tr-colores)}
.board-tab-add:hover{background:rgba(0,0,0,0.07);color:var(--c-text)}
body.dark .board-tab-add:hover{background:rgba(255,255,255,0.1)}
.board-tab-add .material-symbols-rounded{font-size:18px}

/* Los filtros de Proyectos colgaban en absoluto de la esquina superior derecha;
   ahora comparten fila con el selector, así que fluyen dentro de la cabecera. */
#view-board .board-toolbar{grid-column:3;justify-self:end;padding:0;min-height:0;min-width:max-content}
#view-board .board-assignee-pills{position:static}

@media (max-width:768px){
  .board-topbar{padding:10px 12px 4px;gap:0}
}

/* Columna fantasma para crear columnas sin salir del tablero */
.col-add-ghost{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;height:52px;flex-shrink:0;
  border:1.5px dashed var(--c-border2);border-radius:var(--radius-lg);background:transparent;
  color:var(--c-text3);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;
  transition:var(--tr-colores)}
.col-add-ghost:hover{color:var(--c-text2);border-color:var(--c-text3);background:rgba(0,0,0,0.03)}
body.dark .col-add-ghost:hover{background:rgba(255,255,255,0.04)}
.col-add-ghost .material-symbols-rounded{font-size:18px}

/* ── Modal de gestión ── */
.boards-mgr-list{display:flex;flex-direction:column;gap:8px}
.boards-mgr-row{display:flex;align-items:center;gap:8px}
.boards-mgr-emoji{width:36px;height:36px;flex-shrink:0;border-radius:var(--radius);border:1px solid var(--c-border);
  background:var(--c-surface);font-size:17px;line-height:1;cursor:pointer;transition:var(--tr-colores)}
.boards-mgr-emoji:hover{background:var(--c-surface2);border-color:var(--c-border2)}
.boards-mgr-name{flex:1;min-width:0}
.boards-mgr-actions{display:flex;gap:2px;flex-shrink:0}
.boards-mgr-actions button{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:none;background:transparent;border-radius:6px;color:var(--c-text3);cursor:pointer;transition:var(--tr-colores),opacity var(--tr)}
.boards-mgr-actions button:hover:not(:disabled){background:rgba(0,0,0,0.07);color:var(--c-text2)}
body.dark .boards-mgr-actions button:hover:not(:disabled){background:rgba(255,255,255,0.09)}
.boards-mgr-actions button:disabled{opacity:0.3;cursor:default}
.boards-mgr-actions .material-symbols-rounded{font-size:17px}
.boards-mgr-del:hover:not(:disabled){color:var(--c-red, #EF4444)!important}
.boards-mgr-empty{color:var(--c-text3);font-size:13px;text-align:center;padding:20px 0}
/* Candado en ámbar: de un vistazo se ve qué tablero no lo ve todo el equipo */
.boards-mgr-share.restringido{color:var(--c-amber, #F59E0B)}

/* ── Compartir un tablero ── */
.board-share{width:min(420px,92vw)}
.board-share-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.board-share-mode{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:2px 8px;padding:10px 12px;text-align:left;cursor:pointer;
  border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface);
  color:var(--c-text);font-family:var(--font);transition:var(--tr-colores)}
.board-share-mode:hover{border-color:var(--c-border2);background:var(--c-surface2)}
.board-share-mode.activo{border-color:var(--c-accent);background:var(--c-accent-bg)}
.board-share-mode .material-symbols-rounded{grid-row:1/3;align-self:center;font-size:20px;color:var(--c-text3)}
.board-share-mode.activo .material-symbols-rounded{color:var(--c-accent)}
.board-share-mode-t{font-size:13px;font-weight:500}
.board-share-mode-p{font-size:11px;color:var(--c-text3);line-height:1.3}
.board-share-list{display:flex;flex-direction:column;max-height:260px;overflow-y:auto}
.board-share-list:not(:empty){border-top:1px solid var(--c-border);padding-top:8px}
.board-share-row{display:flex;align-items:center;gap:10px;padding:6px 2px;cursor:pointer}
.board-share-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--c-accent);cursor:pointer}
.board-share-row input[type=checkbox]:disabled{cursor:default}
.board-share-name{flex:1;min-width:0;font-size:13px;color:var(--c-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-share-perm{font-size:12px;font-family:var(--font);padding:3px 6px;border-radius:6px;
  border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);cursor:pointer}
.board-share-perm:disabled{opacity:.4;cursor:default}
.board-share-owner{font-size:11px;color:var(--c-text3);padding-right:6px}

.boards-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--c-text3);font-size:14px;width:100%;padding:60px 20px}

/* Herramientas de columna: solo al pasar por encima, para no ensuciar la cabecera */
.col-tools{margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity var(--tr)}
.kanban-col:hover .col-tools{opacity:1}
@media (hover:none){.col-tools{opacity:1}}  /* táctil: sin hover no habría forma de borrar la columna */
.col-tools button{background:transparent;border:none;padding:3px;border-radius:6px;cursor:pointer;
  color:var(--c-text3);display:inline-flex;align-items:center}
.col-tools button:hover{background:rgba(0,0,0,0.08);color:var(--c-text2)}
body.dark .col-tools button:hover{background:rgba(255,255,255,0.1)}
.col-tools .material-symbols-rounded{font-size:16px}

/* El nombre de la columna es editable en línea */
#boards-container .col-name{outline:none;cursor:text}
#boards-container .col-name:focus{background:rgba(255,255,255,0.25);border-radius:4px;padding:0 3px}

/* Selector de asignados del modal. `.board-assignee-pills` no vale: está
   posicionado en absoluto para la toolbar del tablero de proyectos. */
.bcard-pills{display:flex;flex-wrap:wrap;gap:6px;position:static}
.bcard-pills .board-av-pill{position:static;opacity:0.45;transition:opacity var(--tr),transform var(--tr)}
.bcard-pills .board-av-pill.active{opacity:1;box-shadow:0 0 0 2px var(--c-bg),0 0 0 4px var(--c-accent, #6366F1)}
.bcard-pills .board-av-pill:hover{opacity:1;transform:translateY(-1px)}

.bcard-composer{width:100%;resize:none;font-family:var(--font);font-size:13px;line-height:1.4;
  padding:9px 11px;border-radius:var(--radius);border:1.5px solid var(--c-accent, #6366F1);
  background:var(--c-bg);color:var(--c-text);outline:none;margin-top:2px}

.bcard-notes-flag{position:absolute;top:8px;right:9px;color:var(--c-text3);display:inline-flex}
.bcard-notes-flag .material-symbols-rounded{font-size:14px}
.project-card.bcard{position:relative}