/* ============================================================
   TASKFLOW — style.css
   Solo estilos que Tailwind CDN no puede cubrir directamente
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:ital,wght@0,300;0,700;1,300&display=swap');

/* ── VARIABLES ───────────────────────────────────────────── */
:root {
  --color-accent:     #DC2626;
  --color-accent-bg:  #FEF2F2;
  --color-border:     #D4CFCA;
  --color-ink:        #1C1917;
  --color-done:       #D6D3CE;
  --color-done-text:  #A8A29E;

  --color-alta:       #DC2626;
  --color-alta-bg:    #FEF2F2;
  --color-media:      #D97706;
  --color-media-bg:   #FFFBEB;
  --color-baja:       #16A34A;
  --color-baja-bg:    #F0FDF4;

  --font-display: 'Fraunces', Georgia, serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  --sidebar-width: 280px;
  --radius:        4px;
  --shadow:        3px 3px 0 var(--color-border);
  --shadow-hover:  4px 4px 0 var(--color-ink);

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

/* ── RESET BÁSICO ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { cursor: pointer; }
button, input, select { font: inherit; color: inherit; background: none; border: none; outline: none; }

/* ── TIPOGRAFÍA ──────────────────────────────────────────── */
body { font-family: var(--font-mono); }
h1   { font-family: var(--font-display); }

.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;
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.app-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 32px;
}

main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── SECCIONES ───────────────────────────────────────────── */
.form-section,
.list-section {
  background: #fff;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.dark .form-section,
.dark .list-section {
  background: #1c1917;
  border-color: #44403c;
  box-shadow: 3px 3px 0 #44403c;
}

/* ── FORM ────────────────────────────────────────────────── */
#task-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field-input  { flex: 1; min-width: 200px; }
.field-priority { width: 140px; }

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

/* ── FILTROS ─────────────────────────────────────────────── */
.filters { display: flex; gap: 8px; }

.filter-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  color: #78716C;
  letter-spacing: .08em;
  transition: border-color .15s, background .15s, color .15s;
}

.filter-btn:hover { border-color: var(--color-ink); color: var(--color-ink); }
.filter-btn.active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.filter-btn:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.dark .filter-btn { border-color: #44403c; color: #78716c; }
.dark .filter-btn:hover { border-color: #fff; color: #fff; }
.dark .filter-btn.active { background: #fff; border-color: #fff; color: #000; }

/* ── LISTA VACÍA ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 0;
  color: #78716c;
  font-size: 13px;
  font-style: italic;
}

/* ── TARJETAS DE TAREA ───────────────────────────────────── */
#task-list { display: flex; flex-direction: column; gap: 8px; }

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 2px 2px 0 var(--color-border);
  transition: border-color .2s, box-shadow .2s, opacity .2s;
  animation: slideIn .2s ease-out;
}

.dark .task-item {
  background: #1c1917;
  border-color: #44403c;
  box-shadow: 2px 2px 0 #292524;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.task-item:hover { border-color: var(--color-ink); box-shadow: 3px 3px 0 var(--color-ink); }
.dark .task-item:hover { border-color: #fff; box-shadow: 3px 3px 0 #fff; }

.task-item.completed {
  background: #f5f5f4;
  border-color: var(--color-done);
  box-shadow: none;
  opacity: .65;
}
.dark .task-item.completed { background: #141412; border-color: #292524; }

/* Checkbox personalizado */
.task-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--color-border);
  border-radius: 3px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background .15s, border-color .15s;
}
.task-checkbox:checked { background: var(--color-accent); border-color: var(--color-accent); }
.task-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 11px; font-weight: 700;
}
.task-checkbox:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Texto tarea */
.task-text {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  word-break: break-word;
  cursor: pointer;
}
.task-item.completed .task-text { text-decoration: line-through; color: var(--color-done-text); }

/* Input edición inline */
.task-edit-input {
  flex: 1; height: 32px;
  padding: 0 8px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  background: #fff;
  font-size: 16px;
}
.dark .task-edit-input { background: #1c1917; color: #fff; }

/* Badge prioridad */
.task-priority {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1.5px solid;
  letter-spacing: .08em;
  text-transform: capitalize;
  flex-shrink: 0;
}
.task-priority.alta  { color: var(--color-alta);  border-color: var(--color-alta);  background: var(--color-alta-bg); }
.task-priority.media { color: var(--color-media); border-color: var(--color-media); background: var(--color-media-bg); }
.task-priority.baja  { color: var(--color-baja);  border-color: var(--color-baja);  background: var(--color-baja-bg); }

/* Botón editar y eliminar */
.task-edit,
.task-delete {
  width: 28px; height: 28px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #78716c;
  flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.task-edit:hover { border-color: #D97706; color: #D97706; background: #FFFBEB; }
.task-edit:focus { outline: 2px solid #D97706; outline-offset: 2px; }
.dark .task-edit { border-color: #44403c; color: #78716c; }
.dark .task-edit:hover { border-color: #D97706; color: #D97706; }

.task-delete:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-bg); }
.task-delete:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.dark .task-delete { border-color: #44403c; color: #78716c; }
.dark .task-delete:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── SIDEBAR ─────────────────────────────────────────────── */
aside {
  width: var(--sidebar-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 88px;
}

.stat-card {
  background: #fff;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.stat-card dt {
  font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #78716c;
  margin-bottom: 4px;
}

.stat-card dd {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; line-height: 1;
}

.stat-card dd.accent { color: var(--color-accent); }

.progress-wrap { margin-top: 8px; }
.progress-label { font-size: 11px; color: #78716c; margin-bottom: 4px; }
.progress-bar-bg { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--color-accent); border-radius: 3px; transition: width .4s ease; }

/* Botones bulk */
.bulk-actions { display: flex; flex-direction: column; gap: 8px; }

.btn-bulk {
  width: 100%; height: 38px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: #78716c;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.btn-bulk:hover { border-color: var(--color-ink); color: var(--color-ink); box-shadow: 2px 2px 0 var(--color-ink); }
.btn-bulk:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .app-wrapper { flex-direction: column; padding: 0 16px; gap: 16px; }

  aside {
    width: 100%; position: static;
    flex-direction: row; flex-wrap: wrap;
  }
  aside > h2 { width: 100%; }
  .stat-card { flex: 1; min-width: 120px; }
  .bulk-actions { flex-direction: row; width: 100%; }
}

@media (max-width: 480px) {
  #task-form { flex-direction: column; }
  .field-input, .field-priority { width: 100%; min-width: unset; }
  .list-header { flex-direction: column; align-items: flex-start; }
  .filters { flex-wrap: wrap; }
  aside { flex-direction: column; }
  .bulk-actions { flex-direction: column; }
}