@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;600;700;800&family=Atkinson+Hyperlegible+Mono:wght@400;600&family=Arimo:wght@400;700&display=swap");

/* Leo Doncel · TaskFlow — componentes en CSS puro. Todo color sale de tokens.css. */
.tf-fila { display: flex; flex-wrap: wrap; gap: var(--espacio-2); align-items: center; }
.tf-pila { display: flex; flex-direction: column; gap: var(--espacio-2); }

/* Foco: separación del color de la superficie y anillo sólido de 2px en `accion` (8:1 o más en ambos temas). */
.tf-foco:focus-visible, .tf-boton:focus-visible, .tf-casilla:focus-visible, .tf-campo input:focus-visible {
  outline: 2px solid var(--accion); outline-offset: 2px;
}

/* ---------- Botón ---------- */
.tf-boton {
  min-height: var(--area-tactil); min-width: var(--area-tactil); padding: 0 var(--espacio-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  font: 600 16px/24px var(--font-ui); border-radius: var(--radio-m); cursor: pointer;
  border: 1px solid var(--linea-control); background: var(--superficie-elevada); color: var(--tinta);
}
.tf-boton:hover { background: var(--superficie-hundida); }
.tf-boton--principal { background: var(--accion); border-color: var(--accion); color: var(--sobre-accion); }
.tf-boton--principal:hover { background: var(--accion-hover); border-color: var(--accion-hover); }
.tf-boton--fantasma { border-color: transparent; background: transparent; color: var(--accion); }
.tf-boton--fantasma:hover { background: var(--accion-tenue); }
.tf-boton--peligro { border-color: var(--vencida); color: var(--vencida); background: var(--superficie-elevada); }
.tf-boton[disabled], .tf-boton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.tf-boton svg { width: 20px; height: 20px; flex: none; }

/* ---------- Etiqueta de estado: siempre ícono + palabra ---------- */
.tf-estado {
  display: inline-flex; align-items: center; gap: var(--espacio-1); padding: 2px var(--espacio-2);
  border-radius: var(--radio-s); font: 700 12px/16px var(--font-ui); letter-spacing: .04em; text-transform: uppercase;
  background: var(--superficie-hundida); color: var(--tinta-suave);
}
.tf-estado svg { width: 14px; height: 14px; flex: none; }
.tf-estado--vencida { background: var(--vencida-fondo); color: var(--vencida); }
.tf-estado--hoy { background: var(--hoy-fondo); color: var(--hoy); }
.tf-estado--alta { background: var(--prioridad-alta-fondo); color: var(--prioridad-alta); }
.tf-estado--completada { background: var(--completada-fondo); color: var(--completada); }
.tf-estado--programada, .tf-estado--recurrente, .tf-estado--reabierta { background: var(--accion-tenue); color: var(--tinta); }

/* ---------- Fila de tarea ---------- */
.tf-tarea {
  display: grid; grid-template-columns: var(--area-tactil) 1fr auto; align-items: start; gap: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-2) var(--espacio-1) 0; border-bottom: 1px solid var(--linea);
  background: var(--superficie-elevada);
}
.tf-tarea--vencida { box-shadow: inset 3px 0 0 var(--vencida); }
.tf-tarea--seleccionada { background: var(--accion-tenue); }
.tf-tarea__cuerpo { min-width: 0; padding-block: 10px; }
.tf-tarea__titulo { font: 400 16px/24px var(--font-ui); color: var(--tinta); overflow-wrap: anywhere; }
.tf-tarea--hecha .tf-tarea__titulo { color: var(--tinta-suave); text-decoration: line-through; }
.tf-tarea__meta { display: flex; flex-wrap: wrap; gap: var(--espacio-1) var(--espacio-2); align-items: center;
  font: 400 14px/20px var(--font-ui); color: var(--tinta-suave); margin-top: 2px; }
.tf-tarea__meta .tf-hora { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Casilla: el botón entero mide 44 × 44; el cuadro visible 22 × 22. */
.tf-casilla { width: var(--area-tactil); height: var(--area-tactil); display: grid; place-items: center;
  background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: var(--radio-m); color: var(--sobre-accion); }
.tf-casilla::before { content: ""; width: 22px; height: 22px; border-radius: var(--radio-s);
  border: 2px solid var(--linea-control); background: var(--superficie-elevada); grid-area: 1 / 1; box-sizing: border-box; }
.tf-casilla svg { grid-area: 1 / 1; width: 16px; height: 16px; visibility: hidden; position: relative; }
.tf-casilla[aria-checked="true"]::before { background: var(--accion); border-color: var(--accion); }
.tf-casilla[aria-checked="true"] svg { visibility: visible; }
.tf-casilla:hover::before { border-color: var(--accion); }

/* ---------- Avatares y presencia ---------- */
.tf-avatar { width: 32px; height: 32px; border-radius: var(--radio-total); display: grid; place-items: center;
  font: 700 13px/1 var(--font-ui); background: var(--superficie-hundida); color: var(--tinta);
  box-shadow: 0 0 0 2px var(--superficie-elevada); }
.tf-avatar--editando { box-shadow: 0 0 0 2px var(--superficie-elevada), 0 0 0 4px var(--anillo, var(--accion)); }
.tf-avatares { display: flex; }
.tf-avatares .tf-avatar + .tf-avatar { margin-left: -6px; }
.tf-cursor { display: inline-block; width: 2px; height: 1.2em; vertical-align: text-bottom; background: var(--anillo); position: relative; }
.tf-cursor__nombre { position: absolute; bottom: 100%; left: -1px; white-space: nowrap; padding: 1px 6px;
  border-radius: var(--radio-s) var(--radio-s) var(--radio-s) 0; background: var(--anillo); color: var(--superficie-elevada);
  font: 700 11px/16px var(--font-ui); }

/* ---------- Sincronización ---------- */
.tf-sin-conexion { display: flex; gap: var(--espacio-2); align-items: center; padding: var(--espacio-2) var(--espacio-4);
  background: var(--marca-amarillo); color: var(--tinta-sobre-amarillo); font: 600 14px/20px var(--font-ui); border-radius: var(--radio-m); }
.tf-sync { display: inline-flex; gap: var(--espacio-1); align-items: center; font: 400 14px/20px var(--font-ui); color: var(--tinta-suave);
  min-height: var(--area-tactil); }
.tf-sync svg { width: 16px; height: 16px; }
.tf-sync--error { color: var(--error); font-weight: 600; }
.tf-sync--ok { color: var(--completada); }

/* ---------- Aviso con deshacer ---------- */
.tf-aviso { display: flex; align-items: center; gap: var(--espacio-4); padding: var(--espacio-1) var(--espacio-1) var(--espacio-1) var(--espacio-4);
  background: var(--tinta); color: var(--superficie-elevada); border-radius: var(--radio-m); box-shadow: var(--sombra-2);
  font: 400 15px/22px var(--font-ui); max-width: 420px; }
.tf-aviso .tf-boton--fantasma { color: var(--superficie-elevada); text-decoration: underline; text-underline-offset: 3px; }
.tf-aviso .tf-boton--fantasma:hover { background: transparent; }

/* ---------- Campo ---------- */
.tf-campo { display: flex; flex-direction: column; gap: var(--espacio-1); }
.tf-campo label { font: 600 14px/20px var(--font-ui); color: var(--tinta); }
.tf-campo input { min-height: var(--area-tactil); padding: 0 var(--espacio-3); border-radius: var(--radio-m); box-sizing: border-box;
  border: 1px solid var(--linea-control); background: var(--superficie-elevada); color: var(--tinta); font: 400 16px/24px var(--font-ui); }
.tf-campo__ayuda { font: 400 14px/20px var(--font-ui); color: var(--tinta-suave); }
.tf-campo--error input { border: 2px solid var(--error); }
.tf-campo--error .tf-campo__ayuda { color: var(--error); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .tf-entra { animation: tf-entra .24s ease-out both; }
  @keyframes tf-entra { from { opacity: .0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}