/* =====================================================================
   components.css: primitivas del sistema de diseño.
   Regla: solo variables de tokens.css (var(--…)). Ningún color en hex aquí.
   Orden: base · botones · campos · selección · etiquetas · badges · pestañas ·
          menús · modal/sheet · toast · banner · estados · shell · tablero ·
          item · dashboard · My Work
   ===================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-accent-text); }

.icon {
  width: var(--icon-md); height: var(--icon-md); flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-text-muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.t-xs { font-size: var(--text-xs-size); line-height: var(--text-xs-line); font-weight: var(--text-xs-weight); }
.t-sm { font-size: var(--text-sm-size); line-height: var(--text-sm-line); font-weight: var(--text-sm-weight); }
.t-base { font-size: var(--text-base-size); line-height: var(--text-base-line); font-weight: var(--text-base-weight); }
.t-lg { font-size: var(--text-lg-size); line-height: var(--text-lg-line); font-weight: var(--text-lg-weight); }
.t-xl { font-size: var(--text-xl-size); line-height: var(--text-xl-line); font-weight: var(--text-xl-weight); }
.t-display { font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: var(--text-display-weight); }
.hstack { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vstack { display: grid; gap: var(--space-3); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Botones ---------- */
.btn {
  --spinner: var(--color-on-accent);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); min-width: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-weight: 600; font-size: var(--text-sm-size); white-space: nowrap; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--secondary { --spinner: var(--color-text); background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-input); }
.btn--secondary:hover { background: var(--color-surface-2); }
.btn--ghost { --spinner: var(--color-text); background: transparent; color: var(--color-text); }
.btn--ghost:hover { background: var(--color-surface-2); }
.btn--danger { --spinner: var(--color-on-danger); background: var(--color-danger); color: var(--color-on-danger); }
.btn--danger:hover { filter: brightness(.9); }
.btn--sm { height: 32px; min-width: 32px; padding: 0 var(--space-3); }
.btn--lg { height: 48px; min-width: 48px; padding: 0 var(--space-6); font-size: var(--text-base-size); }
.btn--icon { padding: 0; width: var(--control-h); }
.btn--icon.btn--sm { width: 32px; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-surface-2); color: var(--color-text-disabled);
  border-color: transparent; cursor: not-allowed; filter: none;
}
/* Cargando: el texto sigue en el DOM (lo lee el lector de pantalla), solo se oculta a la vista */
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"] .icon { visibility: hidden; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--spinner); border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ---------- Campos ---------- */
.field { display: grid; gap: var(--space-1); }
.field__label { font-weight: 600; }
.field__hint { font-size: var(--text-xs-size); line-height: var(--text-xs-line); color: var(--color-text-muted); }
.field__error {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs-size); line-height: var(--text-xs-line); font-weight: 600; color: var(--color-danger-text);
}
.input, .select, .textarea {
  width: 100%; min-height: var(--control-h); padding: 0 var(--space-3);
  font-size: var(--text-base-size); /* 16 px: iOS no hace zoom */
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-sm);
}
.textarea { padding: var(--space-2) var(--space-3); min-height: 96px; line-height: var(--text-base-line); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger-text); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--color-surface-2); color: var(--color-text-disabled); border-color: var(--color-border); cursor: not-allowed; }
.search { position: relative; min-width: 0; } /* min-width 0: deja encoger el buscador dentro de barras flex */
.search > .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.search > .input { padding-left: 40px; }

/* ---------- Selección ---------- */
.checkbox { width: 18px; height: 18px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.check-label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); cursor: pointer; }
.switch {
  position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0;
  border-radius: var(--radius-pill); background: var(--color-border-input); cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-on-accent); transition: transform var(--motion-fast) var(--ease);
}
.switch[aria-checked="true"] { background: var(--color-accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.segmented { display: inline-flex; padding: 2px; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-surface); }
.segmented button { min-height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); font-weight: 600; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--color-selected); color: var(--color-text); }

/* ---------- Etiquetas de estado (c01..c18) ---------- */
.label {
  display: inline-flex; align-items: center; justify-content: center; min-height: 24px;
  padding: 0 var(--space-2); border-radius: var(--radius-sm);
  font-size: var(--text-xs-size); line-height: var(--text-xs-line); font-weight: 600; white-space: nowrap;
  background: var(--l-bg); color: var(--l-on);
}
.label--empty { background: transparent; color: var(--color-text-muted); border: 1px dashed var(--color-border-input); }
.label--c01 { --l-bg: var(--label-c01-bg); --l-on: var(--label-c01-on); }
.label--c02 { --l-bg: var(--label-c02-bg); --l-on: var(--label-c02-on); }
.label--c03 { --l-bg: var(--label-c03-bg); --l-on: var(--label-c03-on); }
.label--c04 { --l-bg: var(--label-c04-bg); --l-on: var(--label-c04-on); }
.label--c05 { --l-bg: var(--label-c05-bg); --l-on: var(--label-c05-on); }
.label--c06 { --l-bg: var(--label-c06-bg); --l-on: var(--label-c06-on); }
.label--c07 { --l-bg: var(--label-c07-bg); --l-on: var(--label-c07-on); }
.label--c08 { --l-bg: var(--label-c08-bg); --l-on: var(--label-c08-on); }
.label--c09 { --l-bg: var(--label-c09-bg); --l-on: var(--label-c09-on); }
.label--c10 { --l-bg: var(--label-c10-bg); --l-on: var(--label-c10-on); }
.label--c11 { --l-bg: var(--label-c11-bg); --l-on: var(--label-c11-on); }
.label--c12 { --l-bg: var(--label-c12-bg); --l-on: var(--label-c12-on); }
.label--c13 { --l-bg: var(--label-c13-bg); --l-on: var(--label-c13-on); }
.label--c14 { --l-bg: var(--label-c14-bg); --l-on: var(--label-c14-on); }
.label--c15 { --l-bg: var(--label-c15-bg); --l-on: var(--label-c15-on); }
.label--c16 { --l-bg: var(--label-c16-bg); --l-on: var(--label-c16-on); }
.label--c17 { --l-bg: var(--label-c17-bg); --l-on: var(--label-c17-on); }
.label--c18 { --l-bg: var(--label-c18-bg); --l-on: var(--label-c18-on); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill); font-size: var(--text-xs-size); font-weight: 600;
  background: var(--color-surface-2); color: var(--color-text);
}
.badge--highlight { background: var(--color-highlight); color: var(--color-on-highlight); }
.badge--danger { background: var(--color-danger); color: var(--color-on-danger); }
.badge--info { background: var(--color-info); color: var(--color-on-info); }
.badge--warning { background: var(--color-warning); color: var(--color-on-warning); }

/* ---------- Pestañas (vistas del tablero, pestañas del item) ---------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; height: var(--control-h); padding: 0 var(--space-3);
  border: 0; border-bottom: 2px solid transparent; background: none; white-space: nowrap;
  color: var(--color-text-muted); font-weight: 600; cursor: pointer;
}
.tab:hover { color: var(--color-text); }
.tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.tab:focus-visible { outline-offset: -2px; }

/* ---------- Menú contextual / popover ---------- */
.menu {
  min-width: 220px; padding: var(--space-1); margin: 0; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop); z-index: var(--z-dropdown);
}
.menu__item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-h);
  padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--color-text); text-align: left; cursor: pointer;
}
.menu__item .icon { color: var(--color-text-muted); }
.menu__item:hover { background: var(--color-surface-2); }
.menu__item:focus-visible { background: var(--color-surface-2); outline-offset: -2px; }
.menu__item--danger, .menu__item--danger .icon { color: var(--color-danger-text); }
.menu__kbd { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-xs-size); }
.menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--color-border); }
.popover { position: absolute; z-index: var(--z-dropdown); }

/* ---------- Modal y sheet (<dialog>) ---------- */
dialog { padding: 0; border: 0; color: var(--color-text); }
.modal {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); overflow: auto;
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
}
.modal::backdrop { background: var(--overlay); }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-4) var(--space-4) 0; }
.modal__title { margin: 0; font-size: var(--text-lg-size); line-height: var(--text-lg-line); font-weight: 600; }
.modal__body { display: grid; gap: var(--space-4); padding: var(--space-4); }
.modal__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.sheet__handle { display: none; width: 36px; height: 4px; margin: var(--space-2) auto 0; border-radius: var(--radius-pill); background: var(--color-border-input); }
/* En móvil los menús y editores de celda salen como hoja inferior */
@media (max-width: 767px) {
  .sheet {
    width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet .sheet__handle { display: block; }
}

/* ---------- Toast con deshacer ---------- */
.toast-region {
  position: fixed; left: 50%; bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: var(--space-2);
  width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--color-text); color: var(--color-surface);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
}
.toast__action {
  min-height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-surface); font-weight: 700; text-decoration: underline; cursor: pointer;
}
.toast__action:focus-visible { outline-color: var(--color-surface); }
.toast__close { color: var(--color-surface); }

/* ---------- Banner ---------- */
.banner {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-left: 4px solid var(--banner, var(--color-info-text));
  border-radius: var(--radius-md);
}
.banner > .icon { color: var(--banner, var(--color-info-text)); margin-top: 2px; }
.banner__text { flex: 1; }
.banner--warning { --banner: var(--color-warning-text); }
.banner--danger { --banner: var(--color-danger-text); }
.banner--success { --banner: var(--color-success-text); }

/* ---------- Estados: vacío, cargando, tooltip, avatar, teclas ---------- */
.empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); }
.empty__icon { width: 40px; height: 40px; color: var(--color-accent-text); }
.empty__title { margin: 0; color: var(--color-text); font-size: var(--text-lg-size); line-height: var(--text-lg-line); font-weight: 600; }
.skeleton {
  height: 12px; border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
.spinner { width: 20px; height: 20px; border: 2px solid var(--color-border-input); border-top-color: var(--color-accent); border-radius: 50%; animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .skeleton, .spinner, .btn[aria-busy="true"]::after { animation-duration: 2.4s; }
}
.tip { position: relative; }
.tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); white-space: nowrap; pointer-events: none;
  background: var(--color-text); color: var(--color-surface); font-size: var(--text-xs-size); font-weight: 500; z-index: var(--z-dropdown);
}
.avatar {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-xs-size); font-weight: 700;
}
kbd {
  display: inline-block; min-width: 22px; padding: 1px 6px; text-align: center;
  font-family: var(--font-mono); font-size: var(--text-xs-size); line-height: var(--text-xs-line);
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border-input); border-bottom-width: 2px; border-radius: var(--radius-xs);
}

/* ---------- Shell: panel lateral + barra superior ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }
.sidebar {
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-2);
  background: var(--color-sidebar-bg); color: var(--color-sidebar-text); overflow-y: auto;
}
.sidebar__brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-3); font-size: var(--text-base-size); font-weight: 700; }
.sidebar__mark { width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--gradient-brand); flex: none; }
.sidebar__section {
  margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-3);
  font-size: var(--text-xs-size); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-sidebar-muted);
}
.nav-item {
  position: relative; display: flex; align-items: center; gap: var(--space-2); width: 100%;
  min-height: var(--control-h); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-sidebar-text); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.nav-item .icon { color: var(--color-sidebar-muted); }
.nav-item:hover { background: var(--color-sidebar-hover); }
.nav-item[aria-current="page"] { background: var(--color-sidebar-active); }
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--color-sidebar-indicator);
}
.nav-item:focus-visible { outline-color: var(--color-sidebar-indicator); outline-offset: -2px; }
.nav-item--child { padding-left: var(--space-8); }
.nav-item__count { margin-left: auto; color: var(--color-sidebar-muted); font-size: var(--text-xs-size); }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-2); height: var(--header-h); padding: 3px var(--space-3) 0;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.topbar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient-brand); }
.topbar__spacer { flex: 1; }
.topbar__menu, .topbar__search-btn { display: none; }
@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(84vw, var(--sidebar-w)); z-index: var(--z-overlay);
    transform: translateX(-100%); transition: transform var(--motion-base) var(--ease);
  }
  .sidebar[data-open="true"] { transform: none; box-shadow: var(--shadow-modal); }
  .topbar__menu, .topbar__search-btn { display: inline-flex; }
  .topbar .search { display: none; } /* en móvil la búsqueda rápida se abre desde su botón */
}

/* ---------- Tablero: cabecera, barra de herramientas, grupos y tabla ---------- */
.board-header { padding: var(--space-4) var(--space-4) 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.board-header__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.board-title { margin: 0; flex: 1; min-width: 0; font-size: var(--text-xl-size); line-height: var(--text-xl-line); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
.toolbar .search { flex: 1 1 200px; max-width: 320px; }
/* Móvil: acciones secundarias solo con icono (la etiqueta queda para el lector) y buscador en su fila */
@media (max-width: 767px) {
  .toolbar .search { order: 2; flex-basis: 100%; max-width: none; }
  .toolbar .btn--ghost { width: var(--control-h); padding: 0; }
  .toolbar .btn--ghost .btn__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}

.group { margin: 0 var(--space-4) var(--space-6); --group-color: var(--label-c15-bg); } /* color de grupo por defecto: c15 */
.group__header { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); }
.group__dot { width: 12px; height: 12px; border-radius: 3px; background: var(--group-color); flex: none; }
.group__title { margin: 0; font-size: var(--text-lg-size); line-height: var(--text-lg-line); font-weight: 600; }
.group__count { color: var(--color-text-muted); font-size: var(--text-xs-size); }
.group[data-collapsed="true"] .grid { display: none; }

.grid {
  --grid-cols: var(--col-name-w) repeat(var(--n-cols, 4), var(--col-w)) 48px;
  position: relative; /* contiene los absolutos (sr-only, popovers) dentro del scroll horizontal */
  overflow-x: auto; background: var(--color-surface);
  border: 1px solid var(--color-border); border-left: 4px solid var(--group-color); border-radius: var(--radius-md);
}
.grid__row { display: grid; grid-template-columns: var(--grid-cols); min-width: max-content; min-height: var(--row-h); background: var(--color-surface); border-top: 1px solid var(--color-border); }
.grid__row:first-child { border-top: 0; }
.grid__row:hover { background: var(--color-surface-2); }
.grid__row[aria-selected="true"] { background: var(--color-selected); }
.grid__row--head { min-height: 32px; font-size: var(--text-xs-size); font-weight: 600; color: var(--color-text-muted); }
.grid__row--head:hover { background: var(--color-surface); }
.cell {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0 var(--space-3);
  border-left: 1px solid var(--color-border); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: inherit;
}
.cell:first-child { border-left: 0; }
.cell:focus-visible, .cell[aria-selected="true"] { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.cell--name { position: sticky; left: 0; z-index: 1; gap: var(--space-1); padding-left: var(--space-1); }
.cell--name .cell__text { overflow: hidden; text-overflow: ellipsis; }
.cell--status { padding: 4px; }
.cell--status .label { flex: 1; height: 100%; min-height: 0; }
.cell--num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.cell--date { justify-content: center; font-variant-numeric: tabular-nums; }
.cell--center { justify-content: center; }
.cell--overdue { color: var(--color-danger-text); font-weight: 600; }
.cell--editing { padding: 0; }
/* El anillo va en el propio input: si va en la celda, el fondo del input lo tapa */
.cell--editing .input { height: 100%; min-height: 0; border: 0; border-radius: 0; outline: 0; box-shadow: inset 0 0 0 2px var(--color-focus); }
.cell--num.cell--editing .input { text-align: right; font-variant-numeric: tabular-nums; }
.grid__row--head .cell--name { padding-left: calc(var(--space-1) + 28px); } /* alinea con el texto tras el asa */
.grid__row--add .cell--name { padding-left: calc(var(--space-6) - var(--space-1)); }
.grip { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--color-text-muted); opacity: 0; cursor: grab; border: 0; background: none; padding: 0; }
.grid__row:hover .grip, .grip:focus-visible { opacity: 1; }
@media (hover: none) { .grip { opacity: 1; } }
.grid__row--add .cell--name { color: var(--color-text-muted); }
.grid__row--add .input { min-height: 0; height: calc(var(--row-h) - 8px); border-color: transparent; background: transparent; font-size: var(--text-sm-size); }
.grid__row--add .input:focus-visible { border-color: var(--color-focus); background: var(--color-surface); font-size: var(--text-base-size); }
.grid__row--summary { min-height: 32px; background: var(--color-surface); }
.grid__row--summary:hover { background: var(--color-surface); }
.dist { display: flex; flex: 1; height: 14px; gap: 1px; border-radius: var(--radius-xs); overflow: hidden; }
.dist > span { background: var(--seg); }

/* ---------- Página de item y updates ---------- */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-modal);
  display: flex; flex-direction: column; width: min(100vw, var(--item-panel-w));
  background: var(--color-surface); box-shadow: var(--shadow-modal);
}
.panel__header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.panel__title { flex: 1; min-width: 0; margin: 0; font-size: var(--text-lg-size); line-height: var(--text-lg-line); font-weight: 600; }
.panel__body { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-4); overflow-y: auto; }
.editor { background: var(--color-surface); border: 1px solid var(--color-border-input); border-radius: var(--radius-md); }
.editor:focus-within { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
.editor .textarea { border: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; outline: 0; min-height: 88px; }
.editor__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2); border-top: 1px solid var(--color-border); }
.update { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.update--pinned { border-color: var(--color-accent); }
.update__meta { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs-size); }
.update__author { color: var(--color-text); font-weight: 600; font-size: var(--text-sm-size); }
.update__body { margin: var(--space-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.update__actions { display: flex; gap: var(--space-1); margin-top: var(--space-2); }

/* ---------- Dashboard y widgets ---------- */
.dash-grid {
  display: grid; grid-template-columns: repeat(var(--widget-cols), minmax(0, 1fr));
  grid-auto-rows: var(--widget-row); gap: var(--widget-gap); padding: var(--space-4);
}
.dash-grid[data-mode="edit"] .widget { outline: 1px dashed var(--color-border-input); outline-offset: 2px; }
@media (max-width: 767px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .dash-grid > .widget { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
.widget {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.widget__header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2) 0 var(--space-4); }
.widget__title { flex: 1; min-width: 0; margin: 0; font-size: var(--text-base-size); line-height: var(--text-base-line); font-weight: 600; }
.widget__body { flex: 1; min-height: 0; padding: var(--space-3) var(--space-4) var(--space-4); }
.battery { display: flex; height: 24px; gap: 2px; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.battery > span { background: var(--seg); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-xs-size); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__dot { width: 10px; height: 10px; border-radius: 2px; background: var(--seg); }
.numbers__value { font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: 700; font-variant-numeric: tabular-nums; }
.numbers__unit { margin-left: var(--space-1); font-size: var(--text-lg-size); color: var(--color-text-muted); font-weight: 600; }
.chart { width: 100%; height: 100%; }
.chart text { fill: var(--color-text-muted); font-size: 12px; font-family: var(--font-sans); }
@media (max-width: 767px) { .chart text { font-size: 22px; } } /* el SVG escala ~0,55 en móvil: ~12 px reales */
.chart .axis { stroke: var(--color-border); }

/* ---------- My Work y listas (papelera) ---------- */
.section { margin: 0 var(--space-4) var(--space-6); }
.section__header { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-base-size); font-weight: 600; }
.list { margin: 0; padding: 0; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.list__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); min-height: var(--row-h); padding: var(--space-1) var(--space-3); border-top: 1px solid var(--color-border); }
.list__item:first-child { border-top: 0; }
.list__main { min-width: 0; }
.list__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.list__sub { display: block; color: var(--color-text-muted); font-size: var(--text-xs-size); line-height: var(--text-xs-line); }