/* ============================================================
   TodoList – estilos compartidos
   Todos los colores y medidas en :root para cambios centralizados
   ============================================================ */
:root{
  /* Colores base */
  --bg:            #1f2937;
  --card:          #374151;
  --card-2:        #4b5563;
  --primary:       #3b82f6;
  --primary-d:     #2563eb;
  --danger:        #dc2626;
  --danger-d:      #b91c1c;
  --text:          #f9fafb;
  --muted:         #9ca3af;
  --border:        #4b5563;

  /* Colores de títulos y grupos */
  --title-pend:    #99ccff;
  --title-done:    #99ff99;
  --ctx-pend:      #b3d9ff;
  --ctx-done:      #b3ffb3;
  --proj:          #ffcc80;

  /* Texto de tareas completadas (tu ajuste de contraste) */
  --done-desc:     #c0c0c0;

  /* Colores de badges */
  --badge-prio-bg: rgba(248,113,113,.15);
  --badge-prio-fg: #f87171;
  --badge-proj-bg: rgba(255,204,128,.15);
  --badge-ctx-bg:  rgba(179,217,255,.15);
  --badge-tag-bg:  rgba(167,139,250,.15);
  --badge-tag-fg:  #a78bfa;

  /* Medidas */
  --radius:        10px;
  --shadow:        0 1px 3px rgba(0,0,0,.3);
  --shadow-fab:    0 4px 14px rgba(59,130,246,.5);
  --shadow-modal:  0 20px 50px rgba(0,0,0,.5);
  --header-bg:     #111827;
  --textarea-max:  9em; /* altura máxima del textarea antes de hacer scroll */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}

/* ---------- Login ---------- */
#login{display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh}
#login form{
  background:var(--card);padding:28px;border-radius:var(--radius);
  box-shadow:var(--shadow);width:100%;max-width:360px;
  display:flex;flex-direction:column;gap:14px;
}
#login h1{margin:0 0 8px;font-size:1.4rem;text-align:center;color:var(--title-pend)}
#login label{font-size:.85rem;color:var(--muted);display:flex;flex-direction:column;gap:6px}

input,select,textarea,button{font:inherit}
input,select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
  background:var(--card-2);color:var(--text);outline:none;
}
textarea{
  resize:vertical;                 /* el usuario puede agrandarlo si quiere */
  min-height:2.6em;
  max-height:var(--textarea-max);
  overflow-y:auto;                 /* scroll cuando supera el máximo */
  line-height:1.35;
  font-family:inherit;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(59,130,246,.25);
}
input:disabled{opacity:.6;cursor:not-allowed}
button{
  cursor:pointer;border:0;border-radius:8px;padding:10px 16px;
  background:var(--primary);color:#fff;font-weight:600;
}
button:hover{background:var(--primary-d)}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
button.ghost:hover{background:var(--card-2)}
.error{color:var(--badge-prio-fg);font-size:.85rem;margin:0;min-height:1.2em;text-align:center}

/* ---------- App ---------- */
#app{display:flex;flex-direction:column;min-height:100vh}
header{
  position:sticky;top:0;z-index:5;
  background:var(--header-bg);border-bottom:1px solid var(--border);
  padding:12px 16px;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;                  /* permite que los controles bajen en móvil */
}
header h1{
  margin:0;font-size:1rem;color:var(--title-pend);flex:1 1 auto;
  text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  min-width:0;
}
.header-actions{display:flex;gap:8px;flex-wrap:wrap}
.header-actions button{font-size:.85rem;padding:8px 12px}

/* Selector de proyecto (solo en todoList.html) */
#proyecto-select{
  max-width:220px;
  padding:8px 10px;
  font-size:.85rem;
}

main{padding:16px;max-width:820px;margin:0 auto;width:100%;padding-bottom:96px}

/* ---------- Secciones ---------- */
.seccion{margin-bottom:24px}
.seccion > h2{
  font-size:1.1rem;font-weight:700;margin:0 0 12px;
  padding:8px 12px;border-radius:6px;
  background:rgba(255,255,255,.03);
}
.seccion.pendientes > h2{color:var(--title-pend)}
.seccion.completadas > h2{color:var(--title-done)}

/* ---------- Grupos ---------- */
.grupo{margin-bottom:16px}
.grupo h3{
  font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  margin:10px 0 8px;padding-left:6px;
}
.seccion.pendientes .grupo h3{color:var(--ctx-pend)}
.seccion.completadas .grupo h3{color:var(--ctx-done)}
.grupo.proyecto h3{color:var(--proj);font-size:.95rem}
.grupo .subgrupo{margin-left:8px}
.grupo .subgrupo h4{
  font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  margin:8px 0 6px;padding-left:6px;
  color:var(--ctx-pend);
}
.seccion.completadas .grupo .subgrupo h4{color:var(--ctx-done)}

/* ---------- Tarea ---------- */
.tarea{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:12px;margin-bottom:8px;
  display:flex;align-items:flex-start;gap:10px;
}
.tarea .check{
  width:22px;height:22px;margin:1px 0 0;flex:0 0 auto;
  accent-color:var(--primary);cursor:pointer;
}
.tarea .content{flex:1;min-width:0}
.tarea .desc{
  word-wrap:break-word;overflow-wrap:break-word;line-height:1.35;
  white-space:pre-wrap;            /* respeta saltos de línea del textarea */
}
.tarea.done .desc{color:var(--done-desc)}
.tarea .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.badge{font-size:.7rem;padding:2px 8px;border-radius:999px;font-weight:600;white-space:nowrap}
.badge.prio{background:var(--badge-prio-bg);color:var(--badge-prio-fg)}
.badge.proj{background:var(--badge-proj-bg);color:var(--proj)}
.badge.ctx{background:var(--badge-ctx-bg);color:var(--ctx-pend)}
.badge.tag{background:var(--badge-tag-bg);color:var(--badge-tag-fg)}
.tarea .edit{
  background:transparent;color:var(--muted);font-size:1.05rem;
  padding:6px 8px;border-radius:8px;flex:0 0 auto;
}
.tarea .edit:hover{background:var(--card-2);color:var(--text)}
.empty{text-align:center;color:var(--muted);padding:48px 16px;font-size:.95rem}

/* ---------- FAB ---------- */
#fab{
  position:fixed;right:20px;bottom:20px;z-index:6;
  width:56px;height:56px;border-radius:50%;font-size:1.8rem;line-height:1;
  box-shadow:var(--shadow-fab);
  display:flex;align-items:center;justify-content:center;padding:0 0 4px;
}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal-content{
  background:var(--card);border-radius:var(--radius);width:100%;max-width:460px;
  max-height:calc(100vh - 32px);   /* nunca más alto que la pantalla */
  display:flex;flex-direction:column;   /* cabecera fija + cuerpo con scroll */
  padding:22px;box-shadow:var(--shadow-modal);
}
.modal-content h2{
  margin:0 0 16px;font-size:1.15rem;color:var(--title-pend);
  flex:0 0 auto;
}
.modal-content form{
  display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;                 /* el formulario hace scroll si no cabe */
  min-height:0;
}
.modal-content label{
  font-size:.85rem;color:var(--muted);
  display:flex;flex-direction:column;gap:6px;
}
.hint{font-size:.75rem;color:var(--muted);margin-top:-6px}

/* Acciones del modal: reordenadas para que "Eliminar" no se salga */
.modal-actions{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:flex-end;
  margin-top:4px;
}
.modal-actions .delete{
  background:var(--danger);margin-right:auto;
}
.modal-actions .delete:hover{background:var(--danger-d)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;
  background:var(--header-bg);color:#fff;padding:10px 18px;border-radius:999px;
  font-size:.9rem;box-shadow:0 6px 20px rgba(0,0,0,.4);max-width:90vw;text-align:center;
  border:1px solid var(--border);
}

/* ---------- Responsivo ---------- */
@media (max-width:480px){
  /* En móvil el modal ocupa casi toda la pantalla y las acciones se apilan */
  .modal{padding:8px}
  .modal-content{padding:18px;max-height:calc(100vh - 16px)}
  .modal-actions{
    flex-direction:column-reverse;    /* Eliminar abajo, Cancelar/Guardar arriba */
    align-items:stretch;
  }
  .modal-actions .delete{margin-right:0}
  .modal-actions button{width:100%}
  header{padding:10px 12px}
  .header-actions{flex:1 1 100%;justify-content:flex-end}
}

@media (min-width:640px){
  header h1{font-size:1.15rem}
  main{padding:24px 24px 96px}
  .tarea{padding:14px}
}